/*//////////////////////////////////////////////////////////////////
[ DESIGN BRIDGE ]

Phase 1 of the redesign. Restyles Bootstrap 4 + existing app primitives
through the design-system tokens (css/design-system.css, loaded just
before this). No markup changes — every page inherits the new look.
Loaded LAST in header.php so it wins; remove the two <link>s to revert.

Structure conversion (sidebar -> top action toolbar, sections -> cards)
is Phase 2 and is done page-by-page on top of this.
*/

/* ---- Module accent mapping (app uses body.module-mun / .module-vet) ---- */
body.module-vet {
  --ds-accent: var(--ds-vet);
  --ds-accent-600: #4338ca;
  --ds-accent-700: #3730a3;
  --ds-accent-tint: #eef0fd;
  --ds-ring: rgba(79,70,229,.30);
  --ds-module: var(--ds-vet);
}
body.module-mun { --ds-module: var(--ds-mun); }
/* main.css colours many things with the fixed petrol --brand (text-info — e.g. the quick-filter
   and ⓘ icons —, outline buttons, field focus, active dropdown items, alert-info…). In the vet
   module they follow its accent; set on body, so every colour scheme's vet accent applies. */
body.module-vet {
  --brand: var(--ds-accent);
  --brand-dark: var(--ds-accent-700);
  --brand-tint: var(--ds-accent-tint);
  --brand-focus: var(--ds-ring);
  --ds-info: var(--ds-accent);
  --ds-info-tint: var(--ds-accent-tint);
  --module-accent: var(--ds-accent);
}
body.module-vet .alert-info { border-color: var(--ds-accent-tint); color: var(--ds-accent-700); }

/* Bootstrap / plugin blues that no rule mapped yet: the module accent (both modules) */
.text-primary { color: var(--ds-accent) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ds-accent); border-color: var(--ds-accent); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem var(--ds-ring); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--ds-accent); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.active {
  background-image: none; background-color: var(--ds-accent); border-color: var(--ds-accent); color: #fff; text-shadow: none;
}
.daterangepicker td.active, .daterangepicker td.active:hover,
.daterangepicker .ranges li.active { background-color: var(--ds-accent); color: #fff; }
.daterangepicker td.in-range:not(.active) { background-color: var(--ds-accent-tint); }

/* ---- Typography ---- */
body {
  font-family: var(--ds-font-body);
  color: var(--ds-ink);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ds-font-head);
  letter-spacing: -0.01em;
}

/* Login screen uses Roboto to match the shelter module's typography
   (overrides the global IBM Plex Sans body/.btn fonts above). */
.container-login100,
.container-login100 input,
.container-login100 select,
.container-login100 button,
.container-login100 .btn,
.container-login100 .login100-form-title-1 {
  font-family: 'Roboto', sans-serif;
}

/* Selected municipality text: normal weight like the shelter module
   (overrides .btn { font-weight: 600 } inherited by the selectpicker toggle). */
.container-login100 .bootstrap-select > .dropdown-toggle,
.container-login100 .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  font-weight: 400;
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--ds-font-body);
  font-weight: 600;
  border-radius: var(--ds-r-sm);
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--ds-ring); }

.btn-primary, .btn-info {
  background-color: var(--ds-accent);
  border-color: var(--ds-accent);
  color: #fff;
}
/* Disabled (e.g. Запази промени locked to another district): the module colour, not Bootstrap's blue */
.btn-primary:disabled, .btn-primary.disabled, .btn-info:disabled, .btn-info.disabled {
  background-color: var(--ds-accent);
  border-color: var(--ds-accent);
  color: #fff;
}
.btn-primary:hover, .btn-info:hover,
.btn-primary:focus, .btn-info:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled):active {
  background-color: var(--ds-accent-600);
  border-color: var(--ds-accent-600);
  color: #fff;
}

.btn-outline-secondary {
  color: var(--ds-ink);
  background-color: var(--ds-card);
  border-color: var(--ds-border-strong);
}
/* No hover on a disabled button (e.g. История without changes) */
.btn-outline-secondary:hover:not(:disabled):not(.disabled),
.btn-outline-secondary:focus:not(:disabled):not(.disabled),
.btn-outline-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--ds-sunken);
  color: var(--ds-ink);
  border-color: var(--ds-border-strong);
}

.btn-secondary {
  background-color: var(--ds-sunken);
  border-color: var(--ds-border-strong);
  color: var(--ds-ink);
}
.btn-secondary:hover { background-color: #e2e8ee; color: var(--ds-ink); }

.btn-danger {
  background-color: var(--ds-danger);
  border-color: var(--ds-danger);
}
.btn-danger:hover, .btn-danger:focus { background-color: #b93a3a; border-color: #b93a3a; }

.btn-success {
  background-color: var(--ds-success);
  border-color: var(--ds-success);
}
.btn-success:hover { background-color: #18815a; border-color: #18815a; }

/* ---- Cards ---- */
.card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r);
  box-shadow: var(--ds-shadow-1);
}
.card-header {
  background: linear-gradient(180deg, #ffffff, var(--ds-surface));
  border-bottom: 1px solid var(--ds-border);
  font-family: var(--ds-font-head);
  font-weight: 600;
  color: var(--ds-ink);
}
.card-header.bg-light { background: linear-gradient(180deg, #ffffff, var(--ds-surface)) !important; }
.card-header i { color: var(--ds-module, var(--ds-accent)); }

/* ---- Tables (incl. DataTables) ---- */
.table thead th {
  background-color: var(--ds-sunken);
  color: var(--ds-ink-muted);
  font-family: var(--ds-font-head);
  font-weight: 600;
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--ds-border);
  border-top: 0;
}
.thead-light th { background-color: var(--ds-sunken) !important; color: var(--ds-ink-muted) !important; }
.table td, .table th { border-color: var(--ds-border); }
.table-hover tbody tr:hover { background-color: var(--ds-accent-tint); }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafcfd; }

/* ---- Form controls ---- */
.form-control, .custom-select {
  border-color: var(--ds-border-strong);
  border-radius: var(--ds-r-sm);
  color: var(--ds-ink);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-ring);
}
.input-group-text {
  background-color: var(--ds-sunken);
  border-color: var(--ds-border-strong);
  color: var(--ds-ink-subtle);
}
/* Addons that keep default width (same font-size, so fa-fw icon width is
   unchanged) but let the small input drive the height: zero the addon's
   vertical padding so it stretches to the form-control-sm height instead of
   forcing the default, taller box. */
.input-group.ig-sm-height > .input-group-prepend > .input-group-text,
.input-group.ig-sm-height > .input-group-append > .input-group-text {
  padding-top: 0;
  padding-bottom: 0;
}
.col-form-label-sm, label { color: var(--ds-ink-muted); }

/* ---- Badges ---- */
.badge { font-weight: 600; }
.badge-primary, .badge-info { background-color: var(--ds-accent); }
.badge-success { background-color: var(--ds-success); }
.badge-warning { background-color: var(--ds-warning); color: #fff; }
.badge-danger  { background-color: var(--ds-danger); }
.badge-secondary { background-color: var(--ds-sunken); color: var(--ds-ink-muted); }

/* ---- Pagination (DataTables / Bootstrap): follow the module accent so the
   vet register's tables paginate in its green instead of the petrol brand ---- */
.page-item.active .page-link {
  background-color: var(--ds-accent);
  border-color: var(--ds-accent);
}
.page-link { color: var(--ds-accent); }
.page-link:hover { color: var(--ds-accent-700); }

/* CSV export button: in the vet module follow the module accent (indigo) so it
   matches the theme instead of standing out in green. */
body.module-vet .dt-buttons .btn.dt-csv { background-color: var(--ds-accent); }
body.module-vet .dt-buttons .btn.dt-csv:hover { background-color: var(--ds-accent-600); }

/* Navbar Home / Profile / Exit buttons: hover, active and focus follow the
   module accent (petrol / indigo) instead of the fixed petrol --brand. */
.app-shell #wrapper .navbar .btn-outline-secondary:hover:not(:disabled):not(.disabled),
.app-shell #wrapper .navbar .btn-outline-secondary:not(:disabled):not(.disabled).active {
  color: var(--ds-accent-700);
  background-color: var(--ds-accent-tint);
  border-color: var(--ds-accent);
}
.app-shell #wrapper .navbar .btn-outline-secondary:focus,
.app-shell #wrapper .navbar .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem var(--ds-ring);
}

/* ---- Alerts ---- */
.alert { border-radius: var(--ds-r-sm); }
.alert-success { background-color: var(--ds-success-tint); border-color: #bfe4d2; color: #14623f; }
.alert-warning { background-color: var(--ds-warning-tint); border-color: #ecd9a6; color: #7a5510; }
.alert-danger  { background-color: var(--ds-danger-tint);  border-color: #efc4c4; color: #962d2d; }
.alert-info    { background-color: var(--ds-info-tint);    border-color: #bfe0ea; color: #0a5468; }

/* ---- Top navbar ---- */
.app-shell #wrapper .navbar {
  background-color: var(--ds-card) !important;
  border-bottom: 1px solid var(--ds-border);
  border-top: 3px solid var(--ds-module, var(--ds-accent));
  box-shadow: var(--ds-shadow-1);
}
.app-shell #wrapper .navbar .nav-link {
  color: var(--ds-ink-muted);
  font-weight: 500;
}
.app-shell #wrapper .navbar .nav-link:hover { color: var(--ds-ink); }
.app-shell #wrapper .navbar .nav-link.active { color: var(--ds-accent); }

/* Module indicator badge (left of the menu): module type + municipality
   name on two rows, with the municipality photo / fallback icon. */
.module-badge {
  gap: 0.5rem;
  padding: 0.15rem 0.55rem 0.15rem 0.35rem;
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-module, var(--ds-accent));
  border-radius: var(--ds-r-sm);
  background: var(--ds-sunken);
  line-height: 1.05;
}
.module-badge-logo {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: var(--ds-r-sm);
  border: 1px solid var(--ds-border);
  flex: 0 0 auto;
}
.module-badge-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-card);
  color: var(--ds-module, var(--ds-accent));
}
.module-badge-text { display: flex; flex-direction: column; min-width: 0; }
.module-badge-title {
  font-family: var(--ds-font-head);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ds-module, var(--ds-accent));
  white-space: nowrap;
}
.module-badge-sub {
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The module badge is the home link */
a.module-badge,
a.module-badge:hover,
a.module-badge:focus { text-decoration: none; color: inherit; }
a.module-badge { transition: background-color .15s ease, border-color .15s ease; }
a.module-badge:hover,
a.module-badge:focus-visible { background: var(--ds-card); border-color: var(--ds-border-strong); border-left-color: var(--ds-module, var(--ds-accent)); }
a.module-badge.active { background: var(--ds-card); }


.dropdown-menu {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-sm);
  box-shadow: var(--ds-shadow-2);
  font-size: var(--ds-text-sm);
}
.dropdown-item { color: var(--ds-ink); }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--ds-accent-tint);
  color: var(--ds-accent-700);
}

/* ---- Page header band ---- */
.page-head {
  border-radius: var(--ds-r);
  border-left-color: var(--ds-module, var(--ds-accent));
  /* Gradient starts from the module-themed tint (vet green / municipal petrol)
     instead of the fixed petrol --brand-tint. */
  background:
    url(/images/decor/paws-band.svg) right 70px center / 100px auto no-repeat,
    linear-gradient(180deg, var(--ds-accent-tint), rgba(255, 255, 255, 0.45)),
    var(--ds-card);
}
.page-head-title { font-family: var(--ds-font-head); color: var(--ds-ink); }
.page-head-chip { background-color: var(--ds-module, var(--ds-accent)); border-radius: var(--ds-r-sm); }

/* ---- Modals ---- */
.modal-content { border: 0; border-radius: var(--ds-r); box-shadow: var(--ds-shadow-2); }
.modal-header { border-bottom: 1px solid var(--ds-border); }
/* main.css gives every h1–h6 the ink colour — keep titles white on coloured headers */
.modal-header.text-white .modal-title { color: #fff; }
.modal-footer { border-top: 1px solid var(--ds-border); }

/* ---- Page action toolbar (record forms) ----
   Rendered by actionbar.php right under the page header; in normal flow,
   never floating. Old sidebar markup (list-group wrappers) is flattened so
   the buttons sit in one row; the primary action floats right. */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--ds-4);
  padding: 0.45rem 0.6rem;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r);
  box-shadow: var(--ds-shadow-1);
}
.page-actions .list-group { display: contents; }
.page-actions .btn { margin: 0 !important; }
.page-actions .btn-primary { margin-left: auto !important; }
.page-actions .modal .btn-primary { margin-left: 0 !important; }
/* keep grouped buttons together (don't auto-float the primary inside a group) */
.page-actions .btn-group .btn-primary { margin-left: 0 !important; }

/* ---- Misc ---- */
a { color: var(--ds-accent); }
a:hover { color: var(--ds-accent-700); }

/* ====================================================================
   Batch refinements (density + consistency)
   ==================================================================== */

/* Action toolbar laid out in three zones: Назад alone at the far left,
   secondary/modal buttons centered, entry actions (delete/save/print)
   grouped at the right. Zones are emitted by actionbar.php. */
.page-actions { justify-content: flex-start; }
.page-actions .pa-left,
.page-actions .pa-mid,
.page-actions .pa-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.page-actions .pa-mid { margin-left: auto; margin-right: auto; }
.page-actions .btn-primary { margin-left: 0 !important; }

/* Entry "Печат" buttons: match the gray DataTables print button (main.css). */
.page-actions .btn-print {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}
.page-actions .btn-print:hover,
.page-actions .btn-print:focus,
.page-actions .btn-print:not(:disabled):not(.disabled):active {
  background-color: #5a6268;
  border-color: #5a6268;
  color: #fff;
}

/* Narrower viewports: two rows instead of one. Row 1 keeps Назад (left) and the
   entry actions print/delete/save (right); row 2 holds everything else, wrapping
   as needed (the joined middle btn-group would otherwise overflow and clip). */
@media (max-width: 1650px) {
  .page-actions .pa-left  { order: 1; margin-right: auto; }
  .page-actions .pa-right { order: 2; }
  .page-actions .pa-mid   { order: 3; width: 100%; margin-left: 0; margin-right: 0; }
  .page-actions .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .page-actions .btn-group > .btn {
    margin-left: 0 !important;
    border-radius: var(--ds-r-sm) !important;
  }
}

/* "Последни 20" tables: drop the redundant inner container padding so the
   table sits closer to the card edge. */
.card-table .container-fluid { padding-left: 0; padding-right: 0; }

/* Flash banners (success/failure): tighter vertical padding and gap after. */
.alert-success, .alert-danger {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}
/* Keep the dismiss X vertically centred despite the reduced padding. */
.alert-success.alert-dismissible .close,
.alert-danger.alert-dismissible .close {
  top: 50%;
  transform: translateY(-50%);
  padding-top: 0;
  padding-bottom: 0;
}

/* Entry section cards: columns holding a single card stretch it to equal
   height (the flex row already equalises the columns); columns with stacked
   cards keep them natural. Bottom margin is reduced via the column (mb-2). */
.form-row > [class*="col-md-3"] > .card:only-child { height: 100%; margin-bottom: 0 !important; }

/* Vet entry: a column split into several stacked cards. Stretch the stack to
   the row height (so it matches the single owner/dog card) by letting the last
   card grow into the remaining space. */
.entry-card-stack { height: 100%; }
.entry-card-stack > .card:last-child { flex: 1 1 auto; margin-bottom: 0 !important; }

/* Consistent, tight gap between a card header and the first field/data.
   Kills the leading margin the first label/element carries inside cards. */
.card-body { padding: 0.65rem 0.9rem; }
.card-body > *:first-child { margin-top: 0 !important; }
.card-body > div:first-child > label.col-form-label-sm:first-child,
.card-body .form-row:first-child > [class*="col"] > label:first-child { margin-top: 0 !important; }

/* Entry / vet-entry record cards: tighter card headers and a smaller gap
   between the header and the first input, to reclaim vertical space. */
#submit-entry-form .card-header { padding: 0.35rem 0.9rem; }
#submit-entry-form .card-body { padding-top: 0.4rem; }
#submit-entry-form .card-body > *:first-child.col-form-label-sm { margin-top: 0 !important; padding-top: 0; }

/* Entry record pages: the card/form area scrolls within #content while the
   action bar stays pinned to the bottom of the page (matches the shelter
   module). The bar is rendered just AFTER the form — a direct child of
   #content — and its submit buttons use form="submit-entry-form". The page
   header band stays at the top, the form scrolls in the middle.
   NOTE: entry.php also has legacy modal-wrapper forms that reuse
   id="submit-entry-form"; only the real card form carries .entry-scroll, so
   we key the scroll off that class and keep the other forms out of the flow. */
#content:has(form.entry-scroll) {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: hidden !important;
}
#content:has(form.entry-scroll) > form.entry-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
#content:has(form.entry-scroll) > .page-actions {
  flex-shrink: 0;
  margin-bottom: 0;
  order: 2;          /* force the bar to be the last flex item → always flush bottom */
}
#content:has(form.entry-scroll) > form.entry-scroll { order: 1; }
#content:has(form.entry-scroll) > .page-head,
#content:has(form.entry-scroll) > header { order: 0; }
/* Everything rendered after the action bar (all direct children of #content
   that follow .page-actions) is hidden chrome — the legacy modal-wrapper forms
   that reuse id="submit-entry-form" and any other trailing markup. Collapse it
   all to zero height so nothing can sit below the bar and push it up.
   Stand-alone modals are excluded: they are display:none when closed (no
   footprint) and must keep their real height when opened (Bootstrap shows them
   position:fixed). Modals wrapped in the trailing forms still open fine — the
   form collapses but the fixed modal escapes it. */
#content:has(form.entry-scroll) > *:not(form.entry-scroll):not(.page-actions):not(.page-head):not(header):not(.modal):not(.alert) {
  flex: 0 0 auto;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
}

/* Mobile: shrink the entry-form banner to reclaim vertical space. Scoped to the
   entry pages (form.entry-scroll) so the shared pageBanner() elsewhere is
   untouched. Drops the "записан/редактиран" meta and the decorative chip/paw
   graphic, tightens padding, and shrinks the title. */
@media (max-width: 576px) {
  #content:has(form.entry-scroll) > .page-head,
  #content:has(form.entry-scroll) > header.page-head {
    padding: 0.3rem 0.6rem;
    margin-bottom: 0.5rem;
    background:
      linear-gradient(180deg, var(--brand-tint), rgba(255, 255, 255, 0.45)),
      var(--surface-raised);
  }
  #content:has(form.entry-scroll) > .page-head .page-head-meta,
  #content:has(form.entry-scroll) > .page-head .page-head-chip {
    display: none;
  }
  #content:has(form.entry-scroll) > .page-head .page-head-title {
    font-size: 16px;
  }
}

/* CSV / PDF / Разпечатай buttons: match the small (.btn-sm) action buttons exactly.
   They carry border:0 (main.css), so add a transparent 1px border to make up the
   2px the bordered .btn-sm buttons (e.g. Търси) have. */
.dt-buttons .btn,
.dt-buttons .dt-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid transparent !important;
}

/* ====================================================================
   Responsive density (≤1200px): reclaim horizontal space for the data
   field itself — slimmer input-group icon prepends/appends and tighter
   card side padding. Placed here (last-loaded sheet) so it wins over the
   base .card-body / .input-group-text rules.
   ==================================================================== */
@media (max-width: 1200px) {
  .input-group-text { padding-left: 0.4rem; padding-right: 0.4rem; }
  .input-group-prepend .btn,
  .input-group-append .btn { padding-left: 0.45rem; padding-right: 0.45rem; }

  .card-body { padding-left: 0.5rem; padding-right: 0.5rem; }
  #submit-entry-form .card-header { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ====================================================================
   Search filter panel alignment (search-entry, search-entry-vet,
   vet-search). Labels had mixed margins (searchFields() vs hand-written
   selects) and long labels wrapped to two lines in the narrow columns,
   pushing their field down; text inputs and bootstrap-select toggles also
   had different heights. One label line, one field height everywhere.
   ==================================================================== */
#collapseExample label {
  display: block;
  margin: 0.5rem 0 0 !important;
  padding: 0 0 0.15rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}
#collapseExample .input-group { flex-wrap: nowrap; }
#collapseExample .input-group > .input-group-prepend > .input-group-text {
  padding-top: 0;
  padding-bottom: 0;
}
#collapseExample .input-group > .form-control:not(.bootstrap-select),
#collapseExample .bootstrap-select > .dropdown-toggle {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
/* The select's `border` utility class is copied onto the bootstrap-select
   wrapper (!important), drawing the visible border outside the toggle and
   adding 2px of height. Move the border onto the toggle itself instead. */
#collapseExample .bootstrap-select.form-control { height: auto; border: 0 !important; }
#collapseExample .bootstrap-select > .dropdown-toggle {
  border: 1px solid var(--ds-border-strong) !important;
  background-color: #fff;
}

/* ====================================================================
   Active search filters. Filters are remembered between visits, so an
   applied filter (server marks it .border-warning inside the filter
   panel) and a non-empty quick filter must be impossible to miss.
   ==================================================================== */
:root {
  --filter-on: #f57c00;
  --filter-on-tint: #fff3e0;
  --filter-on-ring: rgba(245, 124, 0, 0.25);
}
#collapseExample .form-control.border-warning:not(.bootstrap-select),
#collapseExample .bootstrap-select.border-warning > .dropdown-toggle,
.dataTables_filter input.filter-active {
  border: 2px solid var(--filter-on) !important;
  background-color: var(--filter-on-tint) !important;
  box-shadow: 0 0 0 3px var(--filter-on-ring) !important;
  font-weight: 600;
}
#collapseExample .input-group:has(.border-warning) .input-group-text {
  background-color: var(--filter-on);
  border-color: var(--filter-on);
  color: #fff;
}
#filter-show.filters-on {
  border-color: var(--filter-on) !important;
  background-color: var(--filter-on-tint) !important;
  color: #a34f00 !important;
  font-weight: 600;
}
#filter-show .filter-count {
  background-color: var(--filter-on);
  color: #fff;
  margin-left: 0.25rem;
}

/* Page-end footer inside the scrolling #content: a quiet rule + one muted line,
   so the end of a long table/report reads as the end of the page.
   Entry pages (form.entry-scroll) collapse it with the other trailing children. */
.app-footer {
  margin: 1.5rem 0 0.25rem;
  padding: 0.6rem 0.5rem 0.2rem;
  border-top: 1px solid var(--ds-border);
  color: var(--ds-ink-muted);
  font-size: 0.75rem;
  text-align: center;
}
.app-footer .fa-paw { opacity: 0.6; }
@media print { .app-footer { display: none; } }

/* Сигнали: "Нов" = waiting for us — same amber as "Само за администратор" (badge-warning) */
.badge-pending { background-color: var(--ds-warning); color: #fff; }

/* Small dot on the Система menu when there are new Сигнали (the count is on the item inside) */
.nav-link { position: relative; }
.nav-dot {
  position: absolute; top: 8px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ds-warning); box-shadow: 0 0 0 2px var(--ds-card, #fff);
}

/* New-version notice: header and Разбрах in the same colour as its Докладвай бъг button
   (municipal: --brand, as .btn-outline-primary in main.css; vet: the vet indigo) */
.nv-mun-head { background: var(--brand); }
.nv-mun-solid { background: var(--brand); border-color: var(--brand); }
.nv-mun-solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.nv-vet-head { background: var(--ds-vet); }
.nv-vet-solid { background: var(--ds-vet); border-color: var(--ds-vet); }
.nv-vet-solid:hover { filter: brightness(.92); color: #fff; }
.nv-vet-outline { color: var(--ds-vet); border-color: var(--ds-vet); background: transparent; }
.nv-vet-outline:hover { background: var(--ds-vet); color: #fff; }

/* Ръководства: one collapsible block per topic */
.guide { border: 1px solid var(--ds-border); border-top: 0; border-radius: 0 0 var(--ds-r) var(--ds-r); background: var(--ds-card); }
.guide:only-child, .tab-content > .tab-pane:only-child .guide { border-top: 1px solid var(--ds-border); border-radius: var(--ds-r); }
.guide-sec + .guide-sec { border-top: 1px solid var(--ds-border); }
.guide-sec > summary { display: flex; align-items: center; padding: .7rem 1rem; cursor: pointer; list-style: none; font-weight: 600; }
.guide-sec > summary::-webkit-details-marker { display: none; }
.guide-sec > summary::after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; font-size: .75rem; color: var(--ds-ink-muted); transition: transform .15s; }
.guide-sec[open] > summary::after { transform: rotate(90deg); }
.guide-sec > summary:hover, .guide-sec[open] > summary { background: var(--ds-sunken); }
.guide-sec > summary i { color: var(--ds-accent); }
.guide-body { padding: .6rem 1rem .9rem 2.6rem; font-size: .9rem; }
.guide-body ul { list-style: disc; padding-left: 1.2rem; margin-bottom: .5rem; }
/* main.css sets list-style-type: none on every ul and li */
.guide-body li { display: list-item; list-style-type: disc; }
.guide-body li { margin-bottom: .25rem; }

/* Системен лог (rendered README): show the bullets — main.css sets list-style none on every ul/li */
[name="readme"] ul { list-style: disc; padding-left: 1.4rem; margin-bottom: .75rem; }
[name="readme"] li { display: list-item; list-style-type: disc; margin-bottom: .15rem; }

/* Lists (js/lists.js): the Select2 box sits in the input-group like a .form-control-sm */
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; min-width: 0; }
.select2-container--default .select2-selection--single {
  height: calc(1.5em + .5rem + 2px);
  border-color: var(--ds-border-strong);
  border-radius: var(--ds-r-sm);
  font-size: .875rem;
}
.input-group > .select2-container .select2-selection--single { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + .5rem); padding-left: .5rem; color: var(--ds-ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .5rem); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-ring); }
.select2-dropdown { border-color: var(--ds-border-strong); font-size: .875rem; }
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--ds-accent); }
.input-group > .select2-container.is-invalid .select2-selection--single { border-color: var(--ds-danger); }
.select2-results__option[id$="-__other"] { font-style: italic; border-top: 1px solid var(--ds-border); }
/* Search box in an open list: main.css makes every focused input's border transparent */
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-sm); padding: .25rem .5rem; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--ds-accent) !important; box-shadow: 0 0 0 3px var(--ds-ring); outline: 0; }

/* Отчет за период: main rows (1, 2, 3 …) bold, sub-rows (1.1, 2.1 …) indented */
#general-report tbody tr.rg-main > td { font-weight: 600; }
#general-report tbody tr.rg-sub > td:first-child { color: var(--ds-ink-muted); padding-left: .9rem; }
#general-report tbody tr.rg-sub > td:nth-child(2) { padding-left: 1.6rem; }