/*//////////////////////////////////////////////////////////////////
[ THEME: DARK + LARGE TEXT ]

User preferences (per browser, localStorage — see header.php / js/after-login.js):
  <html data-theme="…" data-mode="dark|light">  colour scheme:
      dark (Тъмна), navy (Синя нощ)                       → data-mode="dark"
      soft (Мека светла), contrast (Висок контраст), petrol (Петролена) → light
  <html data-textsize="large">   larger text
Loaded after design-system.css and design-bridge.css. A scheme is mostly the same
tokens with other values. data-mode="dark" rules cover what still has light colours
of its own (Bootstrap utilities, alerts, vendor widgets, charts); each scheme's
token block then sets its palette.
*/

/* ---- Dark tokens ---- */
html[data-mode="dark"] {
  color-scheme: dark;
  --ds-stage:        #0e151b;
  --ds-surface:      #131c23;
  --ds-card:         #18222b;
  --ds-sunken:       #1f2a34;
  --ds-rail:         #0a1015;
  --ds-rail-2:       #101920;
  --ds-border:        #2b3945;
  --ds-border-strong: #3a4a57;
  --ds-ink:        #e2e8ed;
  --ds-ink-muted:  #a2afba;
  --ds-ink-subtle: #7b8894;
  --ds-accent:      #2ba3c4;
  --ds-accent-600:  #3cb3d3;
  --ds-accent-700:  #62c4de;
  --ds-accent-tint: #13323c;
  --ds-ring:        rgba(43, 163, 196, 0.35);
  --ds-mun: #2ba3c4;
  --ds-vet: #8b84f3;
  --ds-success:      #35b583;
  --ds-success-tint: #14322a;
  --ds-warning:      #d7a13b;
  --ds-warning-tint: #382d16;
  --ds-danger:       #e26a6a;
  --ds-danger-tint:  #3b1f22;
  --ds-info:         #2ba3c4;
  --ds-info-tint:    #13323c;
  --ds-shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --ds-shadow-2: 0 6px 18px rgba(0,0,0,.45);
  /* main.css tokens */
  --brand:          #2ba3c4;
  --brand-dark:     #62c4de;
  --brand-tint:     #13323c;
  --brand-focus:    rgba(43, 163, 196, 0.35);
  --surface-sunken: #0e151b;
  --surface:        #131c23;
  --surface-raised: #18222b;
  --border:         #2b3945;
  --ink:            #e2e8ed;
  --ink-muted:      #a2afba;
  --row-hover:      #13323c;
}
html[data-mode="dark"] body.module-vet {
  --ds-accent: #8b84f3; --ds-accent-600: #9d97f5; --ds-accent-700: #b3aef8;
  --ds-accent-tint: #25234a; --ds-ring: rgba(139,132,243,.35); --ds-module: #8b84f3;
  --module-accent: #8b84f3;
}
html[data-mode="dark"] .section-cards,   html[data-mode="dark"] .crumb-section-cards   { --sec: #2ba3c4; --sec-deep: #62c4de; --sec-tint: #13323c; }
html[data-mode="dark"] .section-reports, html[data-mode="dark"] .crumb-section-reports { --sec: #c27bc1; --sec-deep: #d9a2d8; --sec-tint: #33203a; }
html[data-mode="dark"] .section-tools,   html[data-mode="dark"] .crumb-section-tools   { --sec: #d7a13b; --sec-deep: #e8bd6a; --sec-tint: #382d16; }
html[data-mode="dark"] .section-system,  html[data-mode="dark"] .crumb-section-system  { --sec: #8fa9c2; --sec-deep: #b4c8da; --sec-tint: #1e2a36; }

/* ---- Page, text ---- */
html[data-mode="dark"] body,
html[data-mode="dark"] .bg-darker,
html[data-mode="dark"] .bg-main { background-color: var(--ds-stage) !important; color: var(--ds-ink); }
html[data-mode="dark"] .text-dark,
html[data-mode="dark"] .text-body { color: var(--ds-ink) !important; }
html[data-mode="dark"] .text-muted,
html[data-mode="dark"] .text-secondary { color: var(--ds-ink-muted) !important; }
html[data-mode="dark"] .text-primary, html[data-mode="dark"] .text-info { color: var(--ds-accent) !important; }
html[data-mode="dark"] .text-success { color: var(--ds-success) !important; }
html[data-mode="dark"] .text-danger  { color: var(--ds-danger) !important; }
html[data-mode="dark"] .text-warning { color: var(--ds-warning) !important; }
html[data-mode="dark"] a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item) { color: var(--ds-accent); }
html[data-mode="dark"] hr { border-color: var(--ds-border); }
html[data-mode="dark"] .border, html[data-mode="dark"] .border-top, html[data-mode="dark"] .border-bottom,
html[data-mode="dark"] .border-left, html[data-mode="dark"] .border-right { border-color: var(--ds-border) !important; }

/* ---- Surfaces ---- */
html[data-mode="dark"] .bg-white,
html[data-mode="dark"] .bg-light,
html[data-mode="dark"] .card,
html[data-mode="dark"] .modal-content,
html[data-mode="dark"] .dropdown-menu,
html[data-mode="dark"] .list-group-item,
html[data-mode="dark"] .popover,
html[data-mode="dark"] .jumbotron { background-color: var(--ds-card) !important; color: var(--ds-ink); border-color: var(--ds-border); }
html[data-mode="dark"] .card-header,
html[data-mode="dark"] .card-header.bg-light,
html[data-mode="dark"] .card-footer,
html[data-mode="dark"] .modal-header,
html[data-mode="dark"] .modal-footer { background: var(--ds-sunken) !important; border-color: var(--ds-border); color: var(--ds-ink); }
html[data-mode="dark"] .modal-header.text-white,
html[data-mode="dark"] .modal-header[class*="bg-"]:not(.bg-light) { background: var(--ds-accent) !important; }
html[data-mode="dark"] .close { color: var(--ds-ink); text-shadow: none; opacity: .7; }
html[data-mode="dark"] .dropdown-item { color: var(--ds-ink); }
html[data-mode="dark"] .dropdown-item:hover, html[data-mode="dark"] .dropdown-item:focus { background-color: var(--ds-sunken); color: var(--ds-ink); }
html[data-mode="dark"] .dropdown-divider { border-color: var(--ds-border); }
html[data-mode="dark"] .dropdown-header { color: var(--ds-ink-muted); }
html[data-mode="dark"] .list-group-item-action:hover { background-color: var(--ds-sunken) !important; }
html[data-mode="dark"] .nav-tabs { border-color: var(--ds-border); }
html[data-mode="dark"] .nav-tabs .nav-link.active { background-color: var(--ds-card); border-color: var(--ds-border) var(--ds-border) var(--ds-card); color: var(--ds-ink); }
html[data-mode="dark"] .tooltip-inner { background-color: #000; }
html[data-mode="dark"] details, html[data-mode="dark"] summary { color: var(--ds-ink); }

/* ---- Tables ---- */
html[data-mode="dark"] .table { color: var(--ds-ink); }
/* Bootstrap gives a hovered row dark text (#212529) — keep it light on the dark tint */
html[data-mode="dark"] .table-hover tbody tr:hover,
html[data-mode="dark"] .table-hover tbody tr:hover > td,
html[data-mode="dark"] table.dataTable tbody tr:hover > td { color: var(--ds-ink) !important; background-color: var(--ds-accent-tint); }
html[data-mode="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.025); }
html[data-mode="dark"] .table-bordered, html[data-mode="dark"] .table-bordered td, html[data-mode="dark"] .table-bordered th { border-color: var(--ds-border); }
html[data-mode="dark"] .table-warning, html[data-mode="dark"] .table-warning > td { background-color: var(--ds-warning-tint) !important; color: var(--ds-ink); }
html[data-mode="dark"] .table-danger, html[data-mode="dark"] .table-danger > td { background-color: var(--ds-danger-tint) !important; color: var(--ds-ink); }
html[data-mode="dark"] .table-success, html[data-mode="dark"] .table-success > td { background-color: var(--ds-success-tint) !important; color: var(--ds-ink); }
html[data-mode="dark"] .table-info, html[data-mode="dark"] .table-info > td,
html[data-mode="dark"] .table-active, html[data-mode="dark"] .table-active > td { background-color: var(--ds-accent-tint) !important; color: var(--ds-ink); }

/* ---- Forms ---- */
html[data-mode="dark"] .form-control:not(.btn),
html[data-mode="dark"] .custom-select,
html[data-mode="dark"] textarea,
html[data-mode="dark"] select { background-color: var(--ds-sunken); color: var(--ds-ink); border-color: var(--ds-border-strong); }
html[data-mode="dark"] .form-control:not(.btn):focus { background-color: var(--ds-sunken); color: var(--ds-ink); }
html[data-mode="dark"] .form-control:not(.btn):disabled, html[data-mode="dark"] .form-control[readonly] { background-color: var(--ds-surface); color: var(--ds-ink-muted); }
html[data-mode="dark"] .form-control:not(.btn)::placeholder { color: var(--ds-ink-subtle); }
/* Active filters / filled quick search: the light orange tint becomes a dark amber one */
html[data-mode="dark"] { --filter-on: #f59a3c; --filter-on-tint: #3a2810; --filter-on-ring: rgba(245,154,60,.3); }
html[data-mode="dark"] .dataTables_filter input.filter-active,
html[data-mode="dark"] #collapseExample .form-control.border-warning { color: var(--ds-ink) !important; }
html[data-mode="dark"] #filter-show.filters-on { color: #f8c58a !important; }
html[data-mode="dark"] .input-group-text { background-color: var(--ds-surface); color: var(--ds-ink-muted); border-color: var(--ds-border-strong); }
html[data-mode="dark"] .custom-control-label::before { background-color: var(--ds-sunken); border-color: var(--ds-border-strong); }
html[data-mode="dark"] .form-control:not(.btn).is-valid { border-color: var(--ds-success); }
html[data-mode="dark"] .form-control:not(.btn).is-invalid { border-color: var(--ds-danger); }

/* ---- Buttons, badges, alerts ---- */
html[data-mode="dark"] .btn-light { background-color: var(--ds-sunken); border-color: var(--ds-border-strong); color: var(--ds-ink); }
html[data-mode="dark"] .btn-secondary:hover { background-color: #2a3742; }
html[data-mode="dark"] .btn-outline-dark { color: var(--ds-ink); border-color: var(--ds-border-strong); }
html[data-mode="dark"] .badge-light { background-color: var(--ds-sunken); color: var(--ds-ink); }
html[data-mode="dark"] .badge-dark { background-color: #3a4a57; color: var(--ds-ink); }
html[data-mode="dark"] .badge-secondary { background-color: #2f3d49; color: var(--ds-ink); }
html[data-mode="dark"] .alert-success { background-color: var(--ds-success-tint); border-color: #245442; color: #9fe0c3; }
html[data-mode="dark"] .alert-warning { background-color: var(--ds-warning-tint); border-color: #5c4a22; color: #ecd096; }
html[data-mode="dark"] .alert-danger  { background-color: var(--ds-danger-tint);  border-color: #5e3034; color: #f2b0b0; }
html[data-mode="dark"] .alert-info,
html[data-mode="dark"] .alert-primary { background-color: var(--ds-info-tint); border-color: #1f4c5a; color: #a6dcec; }
html[data-mode="dark"] body.module-vet .alert-info { border-color: var(--ds-accent-tint); color: var(--ds-accent-700); }
html[data-mode="dark"] .alert-secondary, html[data-mode="dark"] .alert-light { background-color: var(--ds-sunken); border-color: var(--ds-border); color: var(--ds-ink); }

/* ---- DataTables ---- */
html[data-mode="dark"] .dataTables_wrapper,
html[data-mode="dark"] .dataTables_wrapper .dataTables_info,
html[data-mode="dark"] .dataTables_wrapper .dataTables_length,
html[data-mode="dark"] .dataTables_wrapper .dataTables_filter { color: var(--ds-ink-muted); }
html[data-mode="dark"] .page-link { background-color: var(--ds-card); border-color: var(--ds-border); }
html[data-mode="dark"] .page-item.disabled .page-link { background-color: var(--ds-card); color: var(--ds-ink-subtle); border-color: var(--ds-border); }
html[data-mode="dark"] table.dataTable tbody tr { background-color: transparent; }
html[data-mode="dark"] table.dataTable tbody tr.selected { background-color: var(--ds-accent-tint) !important; }
html[data-mode="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
html[data-mode="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { box-shadow: 0 0 3px #000; }
html[data-mode="dark"] div.dataTables_processing { background: var(--ds-card); color: var(--ds-ink); }

/* ---- bootstrap-select, Select2, datepickers ---- */
html[data-mode="dark"] .bootstrap-select > .dropdown-toggle,
html[data-mode="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder { background-color: var(--ds-sunken) !important; color: var(--ds-ink) !important; border-color: var(--ds-border-strong) !important; }
html[data-mode="dark"] .bootstrap-select .dropdown-menu li a { color: var(--ds-ink); }
html[data-mode="dark"] .bootstrap-select .dropdown-menu li.selected a,
html[data-mode="dark"] .bootstrap-select .dropdown-menu li a:hover { background-color: var(--ds-accent-tint); }
html[data-mode="dark"] .bootstrap-select .bs-searchbox .form-control { background-color: var(--ds-sunken); }
html[data-mode="dark"] .select2-container--default .select2-selection--single,
html[data-mode="dark"] .select2-container--default .select2-selection--multiple,
html[data-mode="dark"] .select2-dropdown { background-color: var(--ds-sunken); border-color: var(--ds-border-strong); color: var(--ds-ink); }
html[data-mode="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--ds-card); color: var(--ds-ink); }
html[data-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ds-ink); }
html[data-mode="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--ds-accent-tint); }
html[data-mode="dark"] .datepicker.dropdown-menu,
html[data-mode="dark"] .daterangepicker,
html[data-mode="dark"] .daterangepicker .calendar-table { background-color: var(--ds-card); border-color: var(--ds-border); color: var(--ds-ink); }
html[data-mode="dark"] .datepicker table tr td.day:hover, html[data-mode="dark"] .datepicker table tr td.focused,
html[data-mode="dark"] .datepicker .datepicker-switch:hover, html[data-mode="dark"] .datepicker .prev:hover,
html[data-mode="dark"] .datepicker .next:hover, html[data-mode="dark"] .datepicker tfoot tr th:hover,
html[data-mode="dark"] .datepicker table tr td span:hover,
html[data-mode="dark"] .daterangepicker td.available:hover, html[data-mode="dark"] .daterangepicker th.available:hover { background: var(--ds-sunken); }
html[data-mode="dark"] .datepicker table tr td.old, html[data-mode="dark"] .datepicker table tr td.new,
html[data-mode="dark"] .daterangepicker td.off { color: var(--ds-ink-subtle); background-color: transparent; }
html[data-mode="dark"] .datepicker-dropdown:after { border-bottom-color: var(--ds-card); }
html[data-mode="dark"] .daterangepicker td.in-range { background-color: var(--ds-accent-tint); color: var(--ds-ink); }

/* ---- Highcharts (not in styled mode: stylesheet !important beats its inline SVG styles) ---- */
html[data-mode="dark"] .highcharts-background { fill: transparent !important; }
html[data-mode="dark"] .highcharts-title, html[data-mode="dark"] .highcharts-subtitle,
html[data-mode="dark"] .highcharts-axis-labels text, html[data-mode="dark"] .highcharts-axis-title,
html[data-mode="dark"] .highcharts-legend-item text, html[data-mode="dark"] .highcharts-data-label text,
html[data-mode="dark"] .highcharts-stack-labels text { fill: var(--ds-ink) !important; color: var(--ds-ink) !important; }
html[data-mode="dark"] .highcharts-data-label text { text-shadow: none; }
html[data-mode="dark"] .highcharts-data-label text tspan.highcharts-text-outline { stroke: var(--ds-card) !important; fill: var(--ds-card) !important; }
html[data-mode="dark"] .highcharts-grid-line { stroke: var(--ds-border) !important; }
html[data-mode="dark"] .highcharts-axis-line, html[data-mode="dark"] .highcharts-tick { stroke: var(--ds-border-strong) !important; }
html[data-mode="dark"] .highcharts-tooltip-box { fill: var(--ds-card) !important; }
html[data-mode="dark"] .highcharts-tooltip text { fill: var(--ds-ink) !important; }
html[data-mode="dark"] .highcharts-legend-item-hidden text { fill: var(--ds-ink-subtle) !important; }
html[data-mode="dark"] .highcharts-button-box { fill: var(--ds-sunken) !important; }
html[data-mode="dark"] .highcharts-button text { fill: var(--ds-ink) !important; }
html[data-mode="dark"] .highcharts-menu { background: var(--ds-card) !important; border-color: var(--ds-border) !important; }
html[data-mode="dark"] .highcharts-menu-item { color: var(--ds-ink) !important; }
html[data-mode="dark"] .highcharts-drilldown-data-label text, html[data-mode="dark"] a.highcharts-drilldown-axis-label { fill: var(--ds-accent) !important; color: var(--ds-accent) !important; }

/* ---- Inline colours in pages (card history table, duplicate finders) ---- */
html[data-mode="dark"] [style*="background:#fff3cd"] { background: var(--ds-warning-tint) !important; border-color: var(--ds-border-strong) !important; }
html[data-mode="dark"] [style*="background:#bee5eb"] { background: var(--ds-accent-tint) !important; }
html[data-mode="dark"] [style*="background:#fff;"],
html[data-mode="dark"] [style*="background:#e9ecef"] { background: var(--ds-card) !important; }
html[data-mode="dark"] tr.dup-group-0 td { background-color: var(--ds-card) !important; }
html[data-mode="dark"] tr.dup-group-1 td { background-color: var(--ds-accent-tint) !important; }
html[data-mode="dark"] tr.dup-group-sep td { border-top-color: var(--ds-border-strong) !important; }

/* ---- Page header band: the light gradient fades to white; in dark it fades to the card ---- */
html[data-mode="dark"] .page-head,
html[data-mode="dark"] #content:has(form.entry-scroll) > .page-head,
html[data-mode="dark"] #content:has(form.entry-scroll) > header.page-head {
  background:
    url(/images/decor/paws-band.svg) right 70px center / 100px auto no-repeat,
    linear-gradient(180deg, var(--ds-accent-tint), var(--ds-card)),
    var(--ds-card) !important;
  border-color: var(--ds-border);
}
@media (max-width: 576px) {
  html[data-mode="dark"] #content:has(form.entry-scroll) > .page-head,
  html[data-mode="dark"] #content:has(form.entry-scroll) > header.page-head {
    background: linear-gradient(180deg, var(--ds-accent-tint), var(--ds-card)), var(--ds-card) !important;
  }
}

/* ---- Images: logos made for white backgrounds ---- */
html[data-mode="dark"] .module-badge-logo { background: #fff; border-radius: 4px; }

/* ---- The Изглед icons in the Система menu (data-mode is always set for super admins) ---- */
html[data-mode] #view-prefs .vp-row { gap: .3rem; }
html[data-mode] #view-prefs .vp-btn { width: 2.1rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
html[data-mode] #view-prefs .vp-btn.active { background-color: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: #fff !important; }

/* ======================= Other schemes ======================= */

/* ---- Синя нощ: dark, deep navy instead of charcoal (dark-mode rules above apply) ---- */
html[data-theme="navy"] {
  --ds-stage:   #0a1524;  --ds-surface: #0e1c2f;  --ds-card: #12233a;  --ds-sunken: #182c46;
  --ds-rail:    #07101c;  --ds-rail-2:  #0c1828;
  --ds-border:  #243b5a;  --ds-border-strong: #31507a;
  --ds-ink:     #e4ecf7;  --ds-ink-muted: #a4b5cb;  --ds-ink-subtle: #7b8fa9;
  --ds-accent:  #3ab8da;  --ds-accent-600: #52c4e2;  --ds-accent-700: #7bd3ea;  --ds-accent-tint: #113048;
  --ds-ring:    rgba(58,184,218,.38);  --ds-mun: #3ab8da;  --ds-info: #3ab8da;  --ds-info-tint: #113048;
  --brand: #3ab8da; --brand-dark: #7bd3ea; --brand-tint: #113048;
  --surface-sunken: #0a1524; --surface: #0e1c2f; --surface-raised: #12233a; --border: #243b5a;
  --ink: #e4ecf7; --ink-muted: #a4b5cb; --row-hover: #113048;
}

/* ---- Мека светла: no pure white, less glare ---- */
html[data-theme="soft"] {
  --ds-stage:   #dde3ea;  --ds-surface: #e6ebf0;  --ds-card: #eff3f6;  --ds-sunken: #e1e7ed;
  --ds-border:  #c7d0d9;  --ds-border-strong: #b2bdc8;
  --ds-ink:     #1b2833;  --ds-ink-muted: #51606d;  --ds-ink-subtle: #7f8b96;
  --ds-accent-tint: #d7eaf0;
  --surface-sunken: #dde3ea; --surface: #e6ebf0; --surface-raised: #eff3f6; --border: #c7d0d9; --row-hover: #d7eaf0;
}
html[data-theme="soft"] .bg-white, html[data-theme="soft"] .card, html[data-theme="soft"] .modal-content,
html[data-theme="soft"] .dropdown-menu, html[data-theme="soft"] .list-group-item { background-color: var(--ds-card) !important; }
html[data-theme="soft"] .form-control:not(.btn), html[data-theme="soft"] .custom-select,
html[data-theme="soft"] .bootstrap-select > .dropdown-toggle { background-color: #f7f9fb !important; }
/* …except disabled / read-only fields, which keep looking disabled (e.g. Парола until its tick) */
html[data-theme="soft"] .form-control:not(.btn):disabled, html[data-theme="soft"] .form-control:not(.btn)[readonly] { background-color: var(--ds-sunken) !important; color: var(--ds-ink-muted); }
html[data-theme="soft"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.025); }
html[data-theme="soft"] .card-header, html[data-theme="soft"] .card-header.bg-light { background: var(--ds-sunken) !important; }

/* ---- Висок контраст: black text, dark borders, strong colours ---- */
html[data-theme="contrast"] {
  --ds-stage:   #ffffff;  --ds-surface: #ffffff;  --ds-card: #ffffff;  --ds-sunken: #e8e8e8;
  --ds-border:  #6b6b6b;  --ds-border-strong: #1a1a1a;
  --ds-ink:     #000000;  --ds-ink-muted: #1f1f1f;  --ds-ink-subtle: #3d3d3d;
  --ds-accent:  #005a74;  --ds-accent-600: #00465a;  --ds-accent-700: #003444;  --ds-accent-tint: #cde9f2;
  --ds-ring:    rgba(0,90,116,.6);  --ds-mun: #005a74;  --ds-vet: #3b2fc9;
  --ds-success: #0b6b44;  --ds-warning: #8a5a00;  --ds-danger: #a3121f;  --ds-info: #005a74;
  --brand: #005a74; --brand-dark: #003444; --brand-tint: #cde9f2;
  --surface-sunken: #ffffff; --surface: #ffffff; --surface-raised: #ffffff; --border: #6b6b6b;
  --ink: #000000; --ink-muted: #1f1f1f; --row-hover: #cde9f2;
}
html[data-theme="contrast"] body.module-vet { --ds-accent: #3b2fc9; --ds-accent-600: #2e24a3; --ds-accent-700: #231b7d; --ds-accent-tint: #e0ddfb; }
html[data-theme="contrast"] .text-muted, html[data-theme="contrast"] label,
html[data-theme="contrast"] .col-form-label-sm { color: #1f1f1f !important; }
html[data-theme="contrast"] .form-control:not(.btn), html[data-theme="contrast"] .custom-select,
html[data-theme="contrast"] .input-group-text, html[data-theme="contrast"] .bootstrap-select > .dropdown-toggle { border: 2px solid #1a1a1a !important; }
html[data-theme="contrast"] .card, html[data-theme="contrast"] .page-head,
html[data-theme="contrast"] .table-bordered, html[data-theme="contrast"] .table-bordered td,
html[data-theme="contrast"] .table-bordered th, html[data-theme="contrast"] .table td,
html[data-theme="contrast"] .table th { border-color: #6b6b6b !important; }
html[data-theme="contrast"] .table thead th { background-color: #1a1a1a !important; color: #fff !important; }
html[data-theme="contrast"] .page-head { background: #fff !important; }
html[data-theme="contrast"] a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link) { text-decoration: underline; }
html[data-theme="contrast"] .btn:focus, html[data-theme="contrast"] .form-control:not(.btn):focus { outline: 3px solid #000; outline-offset: 1px; }

/* ---- Петролена: light content, coloured bars ---- */
html[data-theme="petrol"] .app-shell #wrapper .navbar { background-color: var(--ds-accent) !important; border-bottom-color: var(--ds-accent-700); }
html[data-theme="petrol"] .app-shell #wrapper .navbar .nav-link { color: rgba(255,255,255,.85); }
html[data-theme="petrol"] .app-shell #wrapper .navbar .nav-link:hover,
html[data-theme="petrol"] .app-shell #wrapper .navbar .nav-link.active { color: #fff; }
/* Profile / Exit on the coloured bar — not the Изглед icons inside the (white) Система menu */
html[data-theme="petrol"] .app-shell #wrapper .navbar .btn-outline-secondary:not(.vp-btn) { background-color: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
html[data-theme="petrol"] .app-shell #wrapper .navbar .btn-outline-secondary:not(.vp-btn):hover { background-color: rgba(255,255,255,.18); color: #fff; }
/* …but buttons inside the (white) dropdown menus keep their normal look (e.g. Кучета / Котки) */
html[data-theme="petrol"] .app-shell #wrapper .navbar .dropdown-menu .btn-outline-secondary { background-color: var(--ds-card); color: var(--ds-ink); border-color: var(--ds-border-strong); }
html[data-theme="petrol"] .app-shell #wrapper .navbar .dropdown-menu .btn-outline-secondary:hover { background-color: var(--ds-sunken); color: var(--ds-ink); }
html[data-theme="petrol"] .app-shell #wrapper .navbar .dropdown-menu .nav-link,
html[data-theme="petrol"] .app-shell #wrapper .navbar .dropdown-menu .dropdown-item { color: var(--ds-ink); }
html[data-theme="petrol"] .module-badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
html[data-theme="petrol"] .module-badge-title, html[data-theme="petrol"] .module-badge-sub { color: #fff !important; }
html[data-theme="petrol"] .page-head {
  background: url(/images/decor/paws-band.svg) right 70px center / 100px auto no-repeat, var(--ds-accent) !important;
  border-color: var(--ds-accent-700);
}
html[data-theme="petrol"] .page-head, html[data-theme="petrol"] .page-head * { color: #fff !important; }
html[data-theme="petrol"] .page-head .btn { color: inherit; }
html[data-theme="petrol"] .table thead th, html[data-theme="petrol"] .thead-light th { background-color: var(--ds-accent) !important; color: #fff !important; }
html[data-theme="petrol"] .card-header, html[data-theme="petrol"] .card-header.bg-light { background: var(--ds-accent-tint) !important; }

/* ---- Large text ---- */
html[data-textsize="large"] {
  font-size: 112.5%;
  --ds-text-xs:  14px;
  --ds-text-sm:  15px;
  --ds-text:     16px;
  --ds-text-md:  17px;
  --ds-text-lg:  20px;
  --ds-text-xl:  24px;
  --ds-text-2xl: 30px;
}
html[data-textsize="large"] body { font-size: 1rem; }
/* main.css sets fixed px sizes for tables, paragraphs, breadcrumbs… */
html[data-textsize="large"] .table,
html[data-textsize="large"] .table .col-search-input,
html[data-textsize="large"] p { font-size: 16px; }
html[data-textsize="large"] .dropdown-item,
html[data-textsize="large"] .app-breadcrumb,
html[data-textsize="large"] .dataTables_wrapper { font-size: 15px; }
html[data-textsize="large"] .small, html[data-textsize="large"] small { font-size: 90%; }