/* ==========================================================================
   Opsis brand skin  —  /css/opsis-theme.css
   Loaded LAST on every team-facing page (after the vendor themes).
   Colour-only refresh toward the logo palette: no layout, spacing, font or
   behaviour change. Rules repeat the vendor selectors so they win by source
   order; !important is used only where the vendor rule or an inline style
   already carries it, or where a page-level <style> block comes later.
   Palette source: vendor/assets/img/opsis-mark.svg
   ========================================================================== */
:root {
  --op-primary: #2e3192;            /* logo indigo  (white text 10.7:1) */
  --op-primary-rgb: 46, 49, 146;
  --op-primary-light: #4a4fb8;      /* logo light indigo (white text 6.8:1) — link hover, focus border, gradient end */
  --op-primary-hover: #292c83;      /* solid surfaces on hover (one step darker, Bootstrap convention) */
  --op-primary-light-rgb: 74, 79, 184;
  --op-primary-dark: #252775;       /* pressed / active */
  --op-primary-disabled: #9fa2d6;
  --op-accent: #8dc63f;             /* logo lime — fills, bars, dots, icons on dark; never text on white */
  --op-accent-rgb: 141, 198, 63;
  --op-accent-text: #557726;        /* lime darkened to 5.2:1 on white (4.8:1 on the off-white canvas) — the only green allowed as text */
  --op-accent-soft: #eef6e2;
  --op-dark: #2c304d;               /* theme navy, kept for headings and dark surfaces (continuity) */
  --op-text: #2c304d;
  --op-muted: #6b6e75;              /* logo grey (5.1:1 on white) replaces #98a8b4 / #aea9c3 on light surfaces */
  --op-placeholder: #8f929a;
  --op-offwhite: #f6f5f2;           /* logo off-white — page canvas */
  --op-border: #e4e8f0;
  --op-hairline: #d9dbe8;           /* input / divider hairlines (was #eee) */
  --op-focus: rgba(46, 49, 146, .25);
  --op-shadow: rgba(46, 49, 146, .08);
}

/* --------------------------------------------------------------------------
   1. Base: links, body text, canvas, utilities
   -------------------------------------------------------------------------- */
a { color: var(--op-primary); }
a:focus, a:hover { color: var(--op-primary-light); }
body, table, .c-class { color: var(--op-muted); }
.page { background: var(--op-offwhite); }
.page.bg-2 { background: var(--op-offwhite); }
.text-primary, a.text-primary:focus, a.text-primary:hover { color: var(--op-primary) !important; }
.text-secondary { color: var(--op-primary-light) !important; }
.text-violet { color: var(--op-primary-light) !important; }
.bg-primary, .bg-violet { background-color: var(--op-primary) !important; }
.border-primary { border-color: var(--op-primary) !important; }
.bg-gradient-02 { background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-dark) 80%) !important; }
.text-gradient-02 { background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary) 80%); }
.bg-gradient-03 { background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-light) 80%) !important; }
.text-gradient-03 { background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-light) 80%); }
.bg-gradient-05 { background: linear-gradient(135deg, var(--op-primary-dark) 0%, var(--op-primary-light) 80%) !important; }
.text-gradient-05 { background: linear-gradient(135deg, var(--op-primary-dark) 0%, var(--op-primary-light) 80%); }
.animated-icon .gradient, .animated-icon .gradient:after {
  background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary) 20%, var(--op-primary-light) 40%, var(--op-primary-light) 60%, var(--op-primary) 80%, var(--op-primary) 100%);
}
::selection { background: rgba(var(--op-primary-rgb), .18); }

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */
.btn-primary { color: #fff; background-color: var(--op-primary); border-color: var(--op-primary); }
.btn-primary:hover { color: #fff; background-color: var(--op-primary-hover); border-color: var(--op-primary-hover); }
.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
  color: #fff; background-color: var(--op-primary-dark); border-color: var(--op-primary-dark);
}
.btn-primary.disabled, .btn-primary:disabled { background-color: var(--op-primary-disabled); border-color: var(--op-primary-disabled); }
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 .2rem var(--op-focus); }
.daterangepicker .btn-primary, .daterangepicker .btn-primary:hover, .daterangepicker .btn-primary:focus,
.daterangepicker .btn-primary.disabled, .daterangepicker .btn-primary:disabled { background-color: var(--op-primary); border-color: var(--op-primary); }

.btn-outline-primary { color: var(--op-primary); border-color: var(--op-primary); background-color: transparent; }
.btn-outline-primary:hover { color: #fff; background-color: var(--op-primary); border-color: var(--op-primary); }
.btn-outline-primary:active, .btn-outline-primary.active, .show > .btn-outline-primary.dropdown-toggle,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active {
  color: #fff; background-color: var(--op-primary-dark); border-color: var(--op-primary-dark);
}
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 .2rem var(--op-focus); }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--op-primary-disabled); background-color: transparent; }

.btn-shadow, .btn-shadow a { color: var(--op-primary); box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .15); }
.btn-shadow:hover, .btn-shadow a:hover { color: var(--op-primary-light); box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .2); }
.btn-shadow:active, .btn-shadow.active, .show > .btn-shadow.dropdown-toggle { color: var(--op-primary-dark); }
.btn-shadow:focus, .btn-shadow.focus { box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .15) !important; }
.btn-shadow.disabled, .btn-shadow:disabled { color: var(--op-primary-disabled); }

.btn-gradient-01, .btn-gradient-01 a, .btn-gradient-02, .btn-gradient-02 a, .btn-gradient-03, .btn-gradient-03 a,
.btn-gradient-04, .btn-gradient-04 a, .btn-gradient-05, .btn-gradient-05 a {
  background: var(--op-primary);
  background: linear-gradient(to right, var(--op-primary) 0%, var(--op-primary-light) 100%);
}
.btn-gradient-01:active, .btn-gradient-01.active, .show > .btn-gradient-01.dropdown-toggle,
.btn-gradient-02:active, .btn-gradient-02.active, .show > .btn-gradient-02.dropdown-toggle,
.btn-gradient-03:active, .btn-gradient-03.active, .show > .btn-gradient-03.dropdown-toggle,
.btn-gradient-04:active, .btn-gradient-04.active, .show > .btn-gradient-04.dropdown-toggle,
.btn-gradient-05:active, .btn-gradient-05.active, .show > .btn-gradient-05.dropdown-toggle {
  background: var(--op-primary-dark); background-color: var(--op-primary-dark); border-color: var(--op-primary-dark);
}
.button-nav a.active { background: var(--op-primary); }
.button-nav a:hover { background: var(--op-primary-light) !important; }
.btn-link { color: var(--op-primary); }
.btn-link:hover { color: var(--op-primary-light); }

/* theme quirks that would read as bugs once colours change */
.btn-light.disabled, .btn-light:disabled { background-color: #f8f9fa; border-color: #f8f9fa; color: var(--op-muted); }
.btn-dark.disabled, .btn-dark:disabled { background-color: var(--op-dark); border-color: var(--op-dark); }
.btn-light:focus, .btn-light.focus, .btn-dark:focus, .btn-dark.focus,
.btn-outline-light:focus, .btn-outline-light.focus, .btn-outline-dark:focus, .btn-outline-dark.focus,
.btn-secondary:focus, .btn-secondary.focus, .btn-outline-secondary:focus, .btn-outline-secondary.focus { box-shadow: 0 0 0 .2rem var(--op-focus); }

/* the queue "Menu" opener is navigation, not a warning */
.open-sidebar .btn-warning { color: #fff; background-color: var(--op-primary); border-color: var(--op-primary); }
.open-sidebar .btn-warning:hover, .open-sidebar .btn-warning:focus { color: #fff; background-color: var(--op-primary-hover); border-color: var(--op-primary-hover); }

/* --------------------------------------------------------------------------
   3. Header / navbar, dropdowns, off-canvas menu, floating buttons
   -------------------------------------------------------------------------- */
nav.navbar { color: var(--op-muted); box-shadow: 0 1px 15px 1px var(--op-shadow); }
nav.navbar .menu-btn span { background: var(--op-primary); }
nav.navbar .search-box .dismiss, nav.navbar .search-box form input { color: var(--op-primary); }
.db-modern nav.navbar .search-box .dismiss, .db-modern nav.navbar .search-box form input::placeholder { color: rgba(246, 245, 242, .72); }
nav.navbar .search-box form input::placeholder { color: var(--op-placeholder); }
nav.navbar .dropdown-menu.notification .notifications-header .notifications-overlay { background: rgba(var(--op-primary-rgb), .8); }
nav.navbar .dropdown-menu.notification .notifications-header-2 .title,
nav.navbar .dropdown-menu.notification li a:hover i,
.dropdown-menu.notification .message-body-heading,
nav.navbar .dropdown-menu a,
nav.navbar .dropdown-menu a.all-notifications,
nav.navbar .dropdown-menu.dropdown-grid a:hover .icon,
nav.navbar .user-size.dropdown-menu h2 { color: var(--op-primary); }
nav.navbar .dropdown-menu a:hover, nav.navbar .dropdown-menu a.all-notifications:hover { color: var(--op-primary-light); }
nav.navbar .user-size.dropdown-menu a.logout { background: var(--op-primary); color: #fff; }
nav.navbar .user-size.dropdown-menu a.logout:hover { background: var(--op-primary-hover); color: #fff; }
.dropdown-menu.notification .message-icon i,
.dropdown-menu.notification .message-body, .dropdown-menu.notification .message-body span.date,
nav.navbar .dropdown-menu a small, nav.navbar .dropdown-menu.dropdown-grid .icon { color: var(--op-muted); }
.widget-options .dropdown-menu a:hover, .widget-options .dropdown-menu a:hover i,
.quick-actions .dropdown-menu a:hover, .quick-actions .dropdown-menu a:hover i,
.actions .dropdown-menu a:hover, .actions .dropdown-menu a:hover i,
.input-group ul.dropdown-menu a:hover { color: var(--op-primary); }
.widget-options .dropdown-toggle, .quick-actions .dropdown-toggle, .actions .dropdown-toggle,
.widget-options .dropdown-menu a i, .input-group .dropdown-toggle, .input-group ul.dropdown-menu { color: var(--op-muted); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--op-primary); color: #fff; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--op-primary); color: #fff; }
.list-group-item.active { background-color: var(--op-primary); border-color: var(--op-primary); }

/* dark sidebar variants (not used by the queue pages, mapped for consistency) */
.default-sidebar, .compact-sidebar, .horizontal-menu, .db-modern .header, .db-modern .menu-area, .db-social .menu-area, .db-social nav.navbar { background: var(--op-dark); }
.default-sidebar > .side-navbar ul a, .default-sidebar > .side-navbar ul ul a, .default-sidebar > .side-navbar span.heading,
.compact-sidebar > .side-navbar span.heading, .compact-sidebar > .side-navbar ul a,
.default-sidebar > .side-navbar a i, .default-sidebar > .side-navbar a[data-toggle="collapse"]::before { color: rgba(246, 245, 242, .72); }
.default-sidebar > .side-navbar a[aria-expanded="true"] i, .default-sidebar > .side-navbar ul a:hover i,
.default-sidebar > .side-navbar ul li.active i, .default-sidebar > .side-navbar li ul li a.active, .default-sidebar > .side-navbar ul ul a:hover,
.compact-sidebar > .side-navbar a[aria-expanded="true"] i, .compact-sidebar > .side-navbar ul a:hover i,
.compact-sidebar > .side-navbar ul li.active i, .compact-sidebar > .side-navbar li ul li a.active, .compact-sidebar > .side-navbar ul ul a:hover,
.horizontal-menu .main-menu .active a, .horizontal-menu .main-menu .active a:focus, .horizontal-menu .main-menu .active a:hover { color: var(--op-accent); }
.compact-light-sidebar > .side-navbar a i, .compact-light-sidebar > .side-navbar ul a, .light-sidebar .side-navbar span.heading { color: var(--op-primary); }
.compact-light-sidebar > .side-navbar a[aria-expanded="true"] i, .compact-light-sidebar > .side-navbar ul a:hover i,
.compact-light-sidebar > .side-navbar ul li.active i, .compact-light-sidebar > .side-navbar li ul li a.active,
.compact-light-sidebar > .side-navbar ul ul a:hover, .compact-light-sidebar > .side-navbar span.heading { color: var(--op-primary-light); }

/* off-canvas queue menu (template classes .myHover / .myActive, page <style> comes after this file) */
.off-sidebar-header.bg-dark { background-color: var(--op-primary) !important; }
.myHover:hover { background-color: var(--op-primary-light) !important; }
.myHover:active, .myActive, a.myHover.myActive { background-color: var(--op-primary) !important; }
.off-sidebar { background: rgba(31, 33, 96, .3); }
.off-sidebar-header h2, .off-sidebar-content .sidebar-heading { color: var(--op-primary); }
.off-sidebar-content .date { color: var(--op-primary-light); }
.off-sidebar-close:before { color: var(--op-muted); border-color: var(--op-muted); }
.off-sidebar-content .new-message { background: rgba(var(--op-primary-rgb), .7) !important; }

/* floating action buttons (page <style> blocks: #0C9 / #5cb85c / #1b5480) */
.my-float-left, .my-float-right, .my-float-top { background-color: var(--op-primary) !important; box-shadow: 2px 2px 3px rgba(107, 110, 117, .5) !important; }
.my-float-left:hover, .my-float-right:hover, .my-float-top:hover { background-color: var(--op-primary-hover) !important; }

/* --------------------------------------------------------------------------
   4. Tabs, pagination, forms
   -------------------------------------------------------------------------- */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--op-primary); border-bottom: 2px solid var(--op-primary) !important; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { color: var(--op-primary) !important; }
.nav-tabs > li > a::after { background: var(--op-primary); }
.nav-tabs .dropdown-item.active, .nav-tabs .dropdown-item:active { background: var(--op-primary); }
.nav-tabs .nav-link i, .nav-link i { color: var(--op-muted); }
.nav-tabs .nav-link.disabled { color: var(--op-placeholder); }
.login-nav a.active { color: var(--op-primary); }

.page-link { color: var(--op-muted); }
.page-link:focus, .page-link:hover { color: var(--op-primary-light); box-shadow: none; }
.page-item.active .page-link { color: var(--op-primary); }
.page-item.disabled .page-link { color: rgba(var(--op-primary-rgb), .25); }
/* Bootstrap pagination markup (missions_control grid; its page <style> fills the active page) */
.pagination .page-item.active .page-link { background-color: var(--op-primary) !important; border-color: var(--op-primary) !important; color: #fff !important; }
.pagination .page-link { color: var(--op-primary) !important; }

.form-control:focus, .has-success .form-control:focus, .has-danger .form-control:focus, .has-warning .form-control:focus, .has-info .form-control:focus,
.custom-select:focus { border-color: var(--op-primary); box-shadow: 0 0 0 .2rem var(--op-focus); }
.form-control::-moz-placeholder { color: var(--op-placeholder); }
.form-control::-webkit-input-placeholder { color: var(--op-placeholder); }
.form-control:-ms-input-placeholder { color: var(--op-placeholder); }
.form-control::placeholder { color: var(--op-placeholder); }
.breadcrumb li.breadcrumb-item { color: var(--op-muted); }
.input-group span.input-group-addon.addon-primary { background: var(--op-primary); border-color: var(--op-primary); }
.input-group span.input-group-addon.addon-orange { background: var(--op-primary-light); border-color: var(--op-primary-light); }
.material-input input:focus ~ label, .material-input input:valid ~ label { color: var(--op-primary); }
.material-input .bar:before, .material-input .bar:after { background: var(--op-primary); }
.material-input label { color: var(--op-muted); }
@-webkit-keyframes inputHighlighter { from { background: var(--op-primary); } to { width: 0; background: transparent; } }
@-moz-keyframes inputHighlighter { from { background: var(--op-primary); } to { width: 0; background: transparent; } }
@keyframes inputHighlighter { from { background: var(--op-primary); } to { width: 0; background: transparent; } }
.styled-radio label:after, .styled-checkbox label:after { background: var(--op-primary); }
.styled-radio label:before, .styled-checkbox label:before { background: rgba(var(--op-primary-rgb), .1); }
.toggle-checkbox:checked + span, .toggle-checkbox-sm:checked + span { background: var(--op-accent); }
.toggle-checkbox + span, .toggle-checkbox-sm + span { background: #e5e4e0; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--op-primary); border-color: var(--op-primary); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem var(--op-focus); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--op-primary-light); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--op-accent); border-color: var(--op-accent); }
.progress { background: rgba(var(--op-primary-rgb), .07); }
.progress-bar { background-color: var(--op-primary); }
.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li.selected a { background-color: rgba(var(--op-primary-rgb), .08); color: var(--op-primary); }
div.dropzone { border-color: rgba(var(--op-primary-rgb), .45) !important; }
.dropzone .dz-message, .dropzone .dz-message:hover { color: var(--op-primary); }

/* --------------------------------------------------------------------------
   5. Wizard stepper (mission_affichernew / mission_modifier)
   -------------------------------------------------------------------------- */
.step-wizard .progressbar { background-color: var(--op-primary); }
/* transition: none — the vendor's 0.6s background transition gets stuck when the wizard adds .active at init,
   which is why the current step rendered as an empty white circle (white text on white) */
.step-wizard li .step { border-color: var(--op-primary); color: var(--op-primary); transition: none; }
.step-wizard .active .step, .step-wizard a:hover .step { background-color: var(--op-primary); border-color: var(--op-primary); color: #fff; box-shadow: inset 0 0 0 60px var(--op-primary); }
.step-wizard .active .title, .step-wizard a:hover .title { color: var(--op-primary); }
.step-wizard li > a { color: var(--op-dark); }
.step-wizard li .title { color: rgba(var(--op-primary-rgb), .55); }

/* --------------------------------------------------------------------------
   6. Tables + DataTables
   -------------------------------------------------------------------------- */
.table thead { background: rgba(var(--op-primary-rgb), .05); }
.table thead th { color: var(--op-primary); }
.table-hover tbody tr:hover, table.dataTable.hover tbody tr:hover, table.dataTable tbody tr:hover { background-color: rgba(var(--op-primary-rgb), .04); }
.table .td-actions a i { color: rgba(var(--op-primary-rgb), .4); }
.table .td-actions a i.edit:hover, .table .td-actions a i.more:hover { background: rgba(var(--op-primary-rgb), .8); }
.invoice .table thead th, .invoice .total .number, .invoice .thx i { color: var(--op-primary); }
.invoice .table td { color: var(--op-text); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--op-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--op-primary) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #fff !important; border-color: var(--op-primary); background: var(--op-primary); }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: #fff !important; border-color: var(--op-primary-hover); background: var(--op-primary-hover); }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--op-placeholder) !important; background: transparent; border-color: transparent; }
.dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { border-color: var(--op-primary); outline: 0; box-shadow: 0 0 0 .2rem var(--op-focus); }
table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: var(--op-primary); opacity: 1; }

/* --------------------------------------------------------------------------
   7. Badges, alerts, modals, overlays, misc chrome
   -------------------------------------------------------------------------- */
.badge-rounded, .badge-text { background: var(--op-primary); }
.badge-primary { background-color: var(--op-primary); }
.db-social .column .new-badge { background: var(--op-dark); }
.db-social .column .new-badge i { color: var(--op-accent); }
.alert-primary { color: var(--op-primary); background-color: rgba(var(--op-primary-rgb), .08); border-color: rgba(var(--op-primary-rgb), .2); }
.alert-outline-primary { color: var(--op-primary); border-color: var(--op-primary); }
.alert-primary-bordered { box-shadow: 7px 0 0 0 var(--op-primary) inset; }
.alert-info[style*="#5d5386"] { border-left-color: var(--op-primary) !important; }
.popover .popover-header { color: var(--op-primary); }
.modal-backdrop { background: rgba(31, 33, 96, .8); }
.sa-icon.sa-success { border-color: var(--op-accent); }
.sa-icon.sa-success .sa-line { background-color: var(--op-accent); }
.noty_type__notification.noty_has_timeout.noty_has_progressbar .noty_progressbar { background-color: var(--op-accent); }
.spinner { border-top-color: var(--op-primary); }
#preloader { background: #fff; }
.go-top { color: var(--op-dark); box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .15); }
.go-top:hover, .go-top:focus { color: var(--op-primary); }
footer.main-footer { box-shadow: 0 1px 15px 1px var(--op-shadow); }
footer.main-footer p, footer.main-footer a.nav-link { color: var(--op-muted); }
footer.main-footer a:hover, footer.main-footer a:hover.nav-link, footer.second-footer a:hover, footer.second-footer a.nav-link { color: var(--op-primary); }
footer.second-footer a:hover.nav-link { color: var(--op-primary-light); }
.timeline .timeline-item > .timeline-point { color: var(--op-primary); background: var(--op-primary); }
.timeline .users-like a.view-more, .db-social .users-like a.view-more { color: var(--op-primary); }
.timeline .timeline-label .label { background: var(--op-primary-light); }
.timeline .widget-header .username, .db-social .widget-header .username { color: var(--op-primary-light); }
.daterangepicker td.active, .daterangepicker td.active:focus, .daterangepicker td.active:hover { background-color: var(--op-primary); border-color: var(--op-primary); }
.ranges ul li.active { background: var(--op-primary); }
.daterangepicker .table-condensed .month { color: var(--op-primary); }
.fc-bg-violet .fc-title, .fc-bg-violet .fc-time, .fc-bg-violet .fc-list-item-title { color: var(--op-primary) !important; }
.fc-bg-violet { border-left-color: var(--op-primary) !important; }
.fc-bg-orange .fc-title, .fc-bg-orange .fc-time, .fc-bg-orange .fc-list-item-title { color: var(--op-primary-light) !important; }
.fc-bg-orange { border-left-color: var(--op-primary-light) !important; }
.error-01 h1 { text-shadow: 1px 1px var(--op-primary-light), 2px 2px var(--op-primary-light), 3px 3px var(--op-primary-light), 4px 4px var(--op-primary-dark), 5px 5px var(--op-primary-dark), 6px 6px var(--op-primary-dark); }
.bg-error-01 { background-color: var(--op-primary-light); }
.hover-img .overlay .button, .hover-img .overlay .button-mini { background: rgba(var(--op-primary-rgb), .9); }
.hover-img .overlay .button:hover, .hover-img .overlay .button-mini:hover { background: rgba(var(--op-primary-rgb), 1); }
.img-hover-02 i { color: var(--op-accent); }
.widget-29 .devices-item { background: linear-gradient(to bottom, rgba(44, 47, 98, 0) 0%, rgba(var(--op-primary-rgb), 1) 80%); }
.widget-30 .overlay { background: linear-gradient(135deg, rgba(44, 47, 98, .5) 0%, rgba(var(--op-primary-rgb), .8) 100%); }
.widget-32 .overlay { background: linear-gradient(135deg, rgba(44, 47, 98, .8) 0%, rgba(var(--op-primary-rgb), .8) 100%); }
.widget-18 .new-message, .widget-24 .overlay { background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-light) 80%); }
.widget-03 .blog-category a { background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-light) 100%); }
.widget-14 .owl-item.active.center .item { background: var(--op-primary-light); }

/* purple-tinted shadows -> indigo tint, same alphas */
.has-shadow, .daterangepicker .calendar, .ranges, .widget-20 .media { -webkit-box-shadow: 0 1px 15px 1px var(--op-shadow); box-shadow: 0 1px 15px 1px var(--op-shadow); }
.widget-04 .post-container { -webkit-box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .1); box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .1); }
.alert-shadow, .widget-14 .owl-item .item, .widget-18 .other-message, .widget-38 .leaflet-marker-icon, .widget-38 .leaflet-popup-content-wrapper { -webkit-box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .15); box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .15); }
.popover, .tooltip-inner { -webkit-box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .18); box-shadow: 0 1px 15px 1px rgba(var(--op-primary-rgb), .18); }
.tooltip-inner { color: var(--op-muted); }

/* --------------------------------------------------------------------------
   8. Dashboard widgets used by the queue pages
   -------------------------------------------------------------------------- */
.widget-header h2 i, .social-network li a, .off-sidebar-content .today-stats i { color: var(--op-muted); }
.widget-header h2[style*="#0da9ef"], .accordion .widget-header > h2[style*="#0da9ef"] { color: var(--op-primary) !important; }
.page-header-title span[style*="#008a00"] { color: var(--op-accent-text) !important; }
.widget-05 .author-name, .widget-13 .author-name, .widget-08 .today .title, .widget-31 .percent, .widget-31 .conso-title .title,
.widget-15 .weather-infos .city, .widget-15 .time-nav a.active, .widget-15 .time-nav a:hover,
.widget-25 .current-weather .temperature, .widget-25 .weather-next-day .temp, .widget-27 .thermostat .temperature, .widget-27 .humidity i,
.widget-18 .input-group-addon .btn, .widget-18 .actions a i, .widget-18 .actions a i.reply:hover, .widget-33 #pause,
.widget-01 .elisyam-version p { color: var(--op-primary); }
.widget-14 .owl-dots .owl-dot:hover, .widget-14 .owl-dots .owl-dot.active, .widget-15 .owl-dots .owl-dot:hover, .widget-15 .owl-dots .owl-dot.active,
.widget-20 .owl-dots .owl-dot:hover, .widget-20 .owl-dots .owl-dot.active, .widget-29 .owl-dots .owl-dot:hover, .widget-29 .owl-dots .owl-dot.active,
.contact-card .owl-dots .owl-dot:hover, .contact-card .owl-dots .owl-dot.active, .contact-card-2 .owl-dots .owl-dot:hover, .contact-card-2 .owl-dots .owl-dot.active { background: var(--op-primary); border-color: var(--op-primary); }
.widget-14 .owl-prev:hover, .widget-14 .owl-next:hover, .widget-15 .owl-prev:hover, .widget-15 .owl-next:hover { color: var(--op-primary); }
.widget-29 .owl-prev:hover, .widget-29 .owl-next:hover { color: var(--op-primary) !important; }
.widget-29 .owl-prev, .widget-29 .owl-next { color: var(--op-muted) !important; }
.widget-11 .timeline.violet:after { background: var(--op-primary); }
.widget-04 .username, .widget-08 .today .new-tasks .nb, .widget-11 .timeline-content .username, .widget-32 #events-day { color: var(--op-primary-light); }
.widget-06 .like, .widget-26 .q-settings i, .widget-33 #playmusic { color: var(--op-accent); }
.widget-33 progress::-webkit-progress-value, .widget-33 progress::-moz-progress-bar { background: var(--op-accent); }
.widget-08 input[type="checkbox"]:checked + label { background: rgba(var(--op-primary-rgb), .8); }
.widget-08 .list li.task-violet:before { background: var(--op-primary); }
.widget-10 .media .status { background: rgba(var(--op-primary-rgb), .3); }
.widget-11 .timeline:before { background: rgba(var(--op-primary-rgb), .1); }
.widget-11 .timeline-content .timeline-icon { background: rgba(var(--op-primary-rgb), .08); }

/* --------------------------------------------------------------------------
   9. Page-level inline colours (attribute selectors; !important beats the inline style)
   -------------------------------------------------------------------------- */
.modal-header[style*="#428bdd"], .modal-header[style*="#5d5386"] { background: var(--op-primary) !important; color: #fff; }
.modal-header[style*="#428bdd"] .modal-title, .modal-header[style*="#428bdd"] .close,
.modal-header[style*="#5d5386"] .modal-title, .modal-header[style*="#5d5386"] .close { color: #fff; opacity: .9; }
b[style*="#5d5386"], span[style*="#5d5386"], i.la-cloud-upload[style*="#5d5386"] { color: var(--op-primary) !important; }
.search-box .form-group.row[style*="#cbcbd5"] { background-color: var(--op-offwhite) !important; }
.myBorder { border-color: var(--op-primary) !important; }
#ref_local, input[style*="#0c98d7"] { border-color: var(--op-primary-light) !important; }
table.table[style*="#03C0F8"] { background: rgba(var(--op-primary-rgb), .18) !important; }
table.table[style*="#81D3EF"], td[style*="#81D3EF"] { background: rgba(var(--op-primary-rgb), .12) !important; }
td[style*="#E1F5FE"] { background: var(--op-offwhite) !important; }
tr[bgcolor="#FF5A75"] { background-color: rgba(var(--op-accent-rgb), .3) !important; }
tr[bgcolor="#FF5A75"] .text-primary { color: var(--op-primary) !important; }
.widget[style*="#f5f4f7"] { background-color: var(--op-offwhite) !important; }
a.dropdown-toggle i.ion-plus-round[style*="red"] { color: var(--op-primary) !important; }
.leaflet-popup-content b[style*="#e74c3c"] { color: var(--op-primary) !important; }
.print-header { border-bottom-color: var(--op-primary); }
.totals-box { border-color: var(--op-primary); }
.map-legend-badge { color: var(--op-dark); }

/* --------------------------------------------------------------------------
   10. Login page (Bootstrap 3 + sb-admin-2)
   -------------------------------------------------------------------------- */
body[style*="sinistre1.jpg"] { background-color: var(--op-offwhite); }
.login-panel.panel-default { border-color: #e3e4ea; }
.login-panel.panel-default > .panel-heading { background-color: #fff; border-color: #e3e4ea; border-top: 3px solid var(--op-primary); }
.login-panel .btn-blue { color: #fff; background-color: var(--op-primary); border-color: var(--op-primary); }
.login-panel .btn-blue:hover, .login-panel .btn-blue:focus, .login-panel .btn-blue.focus { color: #fff; background-color: var(--op-primary-hover); border-color: var(--op-primary-hover); outline: 0; }
.login-panel .btn-blue:active, .login-panel .btn-blue.active { color: #fff; background-color: var(--op-primary-dark); border-color: var(--op-primary-dark); }
.login-panel .btn-blue:focus, .login-panel .btn-blue.focus { box-shadow: 0 0 0 3px var(--op-focus); }
.login-panel .form-control:focus { border-color: var(--op-primary); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(var(--op-primary-rgb), .35); }
.login-panel .form-control::-moz-placeholder { color: var(--op-placeholder); }
.login-panel .form-control::-webkit-input-placeholder { color: var(--op-placeholder); }
.login-panel .form-control:-ms-input-placeholder { color: var(--op-placeholder); }
.login-panel a { color: var(--op-primary); }
.login-panel a:hover, .login-panel a:focus { color: var(--op-primary-light); }

/* forced password-change page (rendered by server.py) */
form[action="/account/password"] button { background: var(--op-primary); }
form[action="/account/password"] button:hover { background: var(--op-primary-hover); }
form[action="/account/password"] input:focus { border-color: var(--op-primary); outline: 0; box-shadow: 0 0 0 3px var(--op-focus); }
.muted a { color: var(--op-primary); }

/* --------------------------------------------------------------------------
   11. Comptabilité pages (second admin theme: comptabilite/assets/css/app.min.css)
   -------------------------------------------------------------------------- */
/* Ubold build: the purple sits in comptabilite/assets/css/bootstrap.min.css (--primary #6658dd) and app.min.css;
   plugin CSS (select2, flatpickr, datepicker, DataTables select/responsive) is linked at the END of <body>, so the
   rules that must beat those files carry extra specificity (body / #wrapper / .flatpickr-calendar prefixes). */
#wrapper { --primary: #2e3192; }
#wrapper .content-page a { color: var(--op-primary); }
#wrapper .content-page a:hover { color: var(--op-primary-light); }
#wrapper .content-page .btn a, #wrapper .content-page a.btn:not(.btn-link) { color: inherit; }
#wrapper .btn-link { color: var(--op-primary); }
#wrapper .btn-link:hover { color: var(--op-primary-light); }
/* topbar: brand indigo behind the reversed lockup (its own indigo rectangle then blends in) */
#wrapper .navbar-custom { background-color: var(--op-primary); }
#wrapper .navbar-custom .topnav-menu .nav-link { color: rgba(255, 255, 255, .78); }
#wrapper .navbar-custom .dropdown.show .nav-link { background-color: rgba(255, 255, 255, .08); }
/* left side menu: resting grey, active/hover indigo (never lime text on white) */
#sidebar-menu > ul > li > a, .nav-second-level li a, .nav-thrid-level li a { color: var(--op-muted); }
#sidebar-menu > ul > li > a:active, #sidebar-menu > ul > li > a:focus, #sidebar-menu > ul > li > a:hover, #sidebar-menu > ul > li > a.active,
.nav-second-level li a:focus, .nav-second-level li a:hover, .nav-thrid-level li a:focus, .nav-thrid-level li a:hover,
.nav-second-level li.active > a, .nav-third-level li.active > a,
.enlarged .left-side-menu #sidebar-menu > ul > li > a:active, .enlarged .left-side-menu #sidebar-menu > ul > li > a:focus, .enlarged .left-side-menu #sidebar-menu > ul > li > a:hover,
.enlarged .left-side-menu #sidebar-menu > ul > li:hover > a, .enlarged .left-side-menu #sidebar-menu > ul > li:hover > ul a:hover, .enlarged .left-side-menu #sidebar-menu > ul ul li.active a { color: var(--op-primary); }
#sidebar-menu .menu-title { color: var(--op-muted); }
#sidebar-menu > ul > li > a.active { background-color: #f0f0f7; box-shadow: inset 3px 0 0 var(--op-accent); }
.user-pro-dropdown .dropdown-item:hover, .right-bar .rightbar-title { background-color: var(--op-primary); }
.rightbar-overlay { background-color: rgba(31, 33, 96, .55); }
/* buttons: primary + the 'blue' variant used for the add/save actions */
#wrapper .btn-primary, #wrapper .btn-blue { color: #fff; background-color: var(--op-primary); border-color: var(--op-primary); }
#wrapper .btn-primary:hover, #wrapper .btn-blue:hover { color: #fff; background-color: var(--op-primary-hover); border-color: var(--op-primary-hover); }
#wrapper .btn-primary:not(:disabled):not(.disabled):active, #wrapper .btn-primary:not(:disabled):not(.disabled).active, #wrapper .show > .btn-primary.dropdown-toggle,
#wrapper .btn-blue:not(:disabled):not(.disabled):active, #wrapper .btn-blue:not(:disabled):not(.disabled).active { color: #fff; background-color: var(--op-primary-dark); border-color: var(--op-primary-dark); }
#wrapper .btn-primary:focus, #wrapper .btn-primary.focus, #wrapper .btn-blue:focus, #wrapper .btn-blue.focus,
#wrapper .btn-primary:not(:disabled):not(.disabled):active:focus, #wrapper .btn-blue:not(:disabled):not(.disabled):active:focus { box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .16), 0 0 0 .15rem var(--op-focus); }
#wrapper .btn-primary.disabled, #wrapper .btn-primary:disabled, #wrapper .btn-blue.disabled, #wrapper .btn-blue:disabled { background-color: var(--op-primary-disabled); border-color: var(--op-primary-disabled); }
#wrapper .btn-outline-primary, #wrapper .btn-outline-blue { color: var(--op-primary); border-color: var(--op-primary); }
#wrapper .btn-outline-primary:hover, #wrapper .btn-outline-blue:hover { color: #fff; background-color: var(--op-primary); border-color: var(--op-primary); }
#wrapper .btn:focus, #wrapper .btn.focus { box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .16), 0 0 0 .15rem var(--op-focus); }
/* utilities (all !important in this Bootstrap build) */
#wrapper .text-primary, #wrapper a.text-primary:focus, #wrapper a.text-primary:hover { color: var(--op-primary) !important; }
#wrapper .bg-primary, #wrapper .bg-blue, #wrapper a.bg-blue:focus, #wrapper a.bg-blue:hover, #wrapper button.bg-blue:focus, #wrapper button.bg-blue:hover { background-color: var(--op-primary) !important; }
#wrapper .border-primary, #wrapper .border-blue { border-color: var(--op-primary) !important; }
#wrapper .text-muted { color: var(--op-muted) !important; }
#wrapper .bg-soft-primary { background-color: rgba(var(--op-primary-rgb), .14); }
#wrapper .badge-primary, #wrapper .badge-blue { background-color: var(--op-primary); }
#wrapper .badge-soft-primary { color: var(--op-primary); background-color: rgba(var(--op-primary-rgb), .18); }
#wrapper .alert-primary { color: var(--op-primary-dark); background-color: rgba(var(--op-primary-rgb), .1); border-color: rgba(var(--op-primary-rgb), .25); }
#wrapper .table-primary, #wrapper .table-primary > td, #wrapper .table-primary > th { background-color: rgba(var(--op-primary-rgb), .15); }
#wrapper .list-group-item.active { background-color: var(--op-primary); border-color: var(--op-primary); }
#wrapper .progress-bar { background-color: var(--op-primary); }
#wrapper .nav-pills .nav-link.active, #wrapper .nav-pills .show > .nav-link { background-color: var(--op-primary); }
#wrapper .nav-tabs .nav-link.active { color: var(--op-primary); }
#wrapper .dropdown-item.active, #wrapper .dropdown-item:active { background-color: var(--op-primary); color: #fff; }
#wrapper .page-item.active .page-link { color: #fff; background-color: var(--op-primary); border-color: var(--op-primary); }
#wrapper .page-link:hover { color: var(--op-primary); }
#wrapper .page-link:focus { box-shadow: 0 0 0 .15rem var(--op-focus); }
#wrapper .footer, #wrapper .footer .footer-links a { color: var(--op-muted); }
/* forms */
#wrapper .form-control:focus, #wrapper .custom-select:focus { border-color: var(--op-primary-light); box-shadow: 0 0 0 .15rem var(--op-focus); }
#wrapper .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--op-primary); border-color: var(--op-primary); }
#wrapper .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .15rem var(--op-focus); }
#wrapper .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--op-primary-light); }
#wrapper .checkbox-primary input[type=checkbox]:checked + label::before, #wrapper .radio-primary input[type=radio]:checked + label::before { background-color: var(--op-primary); border-color: var(--op-primary); }
#wrapper .radio-primary input[type=radio] + label::after, #wrapper .radio-primary input[type=radio]:checked + label::after { background-color: var(--op-primary); border-color: var(--op-primary); }
#wrapper .ribbon-box .ribbon-primary, #wrapper .ribbon-box .ribbon-two-primary span { background: var(--op-primary); }
#wrapper .ribbon-box .ribbon-primary:before { border-color: var(--op-primary-dark) transparent transparent; }
#wrapper .spinner { border-left-color: var(--op-primary); }
/* DataTables (select / responsive / focus) - the bootstrap4 plugin sheets load after this file */
#wrapper table.dataTable tbody > tr.selected, #wrapper table.dataTable tbody > tr > .selected, #wrapper table.dataTable tbody > tr.selected td, #wrapper table.dataTable tbody > tr > .selected td { background-color: var(--op-primary); color: #fff; }
#wrapper table.dataTable tbody td.focus, #wrapper table.dataTable tbody th.focus { outline: 2px solid var(--op-primary) !important; color: var(--op-primary); background-color: rgba(var(--op-primary-rgb), .15); }
#wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, #wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before,
#wrapper table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before { background-color: var(--op-primary); }
#wrapper .dataTables_wrapper .dataTables_filter input:focus, #wrapper .dataTables_wrapper .dataTables_length select:focus { border-color: var(--op-primary-light); box-shadow: 0 0 0 .15rem var(--op-focus); }
/* pickers and selects appended to <body> (sheets loaded later) */
body .datepicker table tr td .active, body .datepicker table tr td .active:hover, body .datepicker table tr td .active.disabled, body .datepicker table tr td span.active, body .datepicker table tr td span.active:hover, body .datepicker table tr td span.active.disabled { background-color: var(--op-primary) !important; background-image: none; border-color: var(--op-primary); color: #fff; }
body .daterangepicker .ranges li.active, body .daterangepicker td.active, body .daterangepicker td.active:hover { background-color: var(--op-primary); border-color: var(--op-primary); }
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected.inRange, .flatpickr-calendar .flatpickr-day.startRange.inRange, .flatpickr-calendar .flatpickr-day.endRange.inRange,
.flatpickr-calendar .flatpickr-day.selected:focus, .flatpickr-calendar .flatpickr-day.startRange:focus, .flatpickr-calendar .flatpickr-day.endRange:focus,
.flatpickr-calendar .flatpickr-day.selected:hover, .flatpickr-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar .flatpickr-day.endRange:hover,
.flatpickr-calendar .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar .flatpickr-day.startRange.prevMonthDay, .flatpickr-calendar .flatpickr-day.endRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar .flatpickr-day.startRange.nextMonthDay, .flatpickr-calendar .flatpickr-day.endRange.nextMonthDay,
.flatpickr-calendar .flatpickr-day.week.selected { background: var(--op-primary); border-color: var(--op-primary); color: #fff; }
.flatpickr-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-calendar .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { -webkit-box-shadow: -10px 0 0 var(--op-primary); box-shadow: -10px 0 0 var(--op-primary); }
.flatpickr-calendar .flatpickr-day.today { border-color: var(--op-primary-light); }
body .clockpicker-popover .popover-title, body .clockpicker-popover .clockpicker-button, body .clockpicker-plate .clockpicker-tick.active, body .clockpicker-canvas-bearing, body .clockpicker-canvas-fg { background-color: var(--op-primary); }
body .select2-container--default .select2-results__option--highlighted[aria-selected], body .select2-container--default .select2-results__option[aria-selected=true]:hover { background-color: var(--op-primary); color: #fff; }
body .select2-container .select2-selection--multiple .select2-selection__choice { background-color: var(--op-primary); border-color: var(--op-primary); color: #fff; }
body .select2-container--default.select2-container--focus .select2-selection--multiple, body .select2-container--default .select2-selection--single:focus { border-color: var(--op-primary-light); }
.ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover { background-color: var(--op-primary); color: #fff; }
/* dialogs / toasts */
.swal2-modal .swal2-confirm.btn-confirm { background-color: var(--op-primary) !important; }
.swal2-container.swal2-shown { background-color: rgba(31, 33, 96, .9); }
.swal2-icon.swal2-question { border-color: var(--op-primary); color: var(--op-primary); }
.swal2-modal .swal2-file:focus, .swal2-modal .swal2-input:focus, .swal2-modal .swal2-textarea:focus { border: 2px solid var(--op-primary); }
.jq-toast-single, .jq-icon-primary { background-color: var(--op-primary); }
/* inline colours on the comptabilité pages */
h3[style*="#6658dd"], i.mdi-bank-transfer-out[style*="#6658dd"] { color: var(--op-primary) !important; }
.show_facture .card-box[style*="rgba(42, 26, 188"] { background-color: rgba(var(--op-primary-rgb), .12) !important; }
#excel2003v, #excelautrev, button.btn-info[style*="#d9663b"] { background: var(--op-primary) !important; border-color: var(--op-primary) !important; color: #fff !important; }
#excel2003v:hover, #excelautrev:hover { background: var(--op-primary-hover) !important; border-color: var(--op-primary-hover) !important; }
.card-box[style*="#7abaff"] { border-color: var(--op-primary-light) !important; }

/* --------------------------------------------------------------------------
   12. Mobile PWA tokens (gated page; one-line re-map through its own custom properties)
   -------------------------------------------------------------------------- */
html:root { --opsis-primary: #2e3192; --opsis-dark: #1f2170; --opsis-accent: #8dc63f; --opsis-bg: #f6f5f2; }
.mobile-topbar { background: linear-gradient(135deg, #1f2170 0%, #2e3192 100%); box-shadow: 0 2px 10px rgba(31, 33, 112, .22); }
.card-opsis { border-color: rgba(var(--op-primary-rgb), .08); }
#sigCanvas { border-color: var(--op-primary); }
.fab-upload { background: linear-gradient(135deg, #2e3192 0%, #1f2170 100%); box-shadow: 0 6px 16px rgba(var(--op-primary-rgb), .4); }
.btn-primary[style*="#5d5386"], label.btn-primary[style*="#5d5386"] { background: var(--op-primary) !important; }

/* --------------------------------------------------------------------------
   13. Quiet refinements agreed with the design panel (no geometry change)
   -------------------------------------------------------------------------- */
/* 3px brand line along the top edge of the main app's white top bar (inset shadow: no layout shift) */
nav.navbar { box-shadow: inset 0 3px 0 var(--op-accent), 0 1px 15px 1px var(--op-shadow); }
/* keyboard-only focus ring on buttons/pills/links (mouse clicks unchanged); inputs keep border + halo */
.btn:focus-visible, .page-link:focus-visible, .my-float-left:focus-visible, .my-float-right:focus-visible, .my-float-top:focus-visible,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible, .nav-tabs .nav-link:focus-visible, .dropdown-item:focus-visible {
  outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--op-primary) !important;
}
/* hairlines: a just-visible edge on inputs and dividers (was #eee) */
.form-control, .custom-select { border-color: var(--op-hairline); }
.modal-header { border-bottom-color: var(--op-hairline); }
.modal-footer { border-top-color: var(--op-hairline); }
.nav-tabs { border-bottom-color: var(--op-hairline); }
.dropdown-menu { border-color: var(--op-hairline); }
/* dashboard ring numbers (sky-blue in the vendor widget css) */
.widget-01 .circle .percent, .circle .percent { color: var(--op-primary); }
/* SweetAlert2 defaults for calls that pass no button classes (both themes) */
.swal2-popup .swal2-styled.swal2-confirm { background-color: var(--op-primary); }
.swal2-popup .swal2-styled.swal2-cancel { background-color: var(--op-placeholder); }
.swal2-popup .swal2-styled:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--op-primary); }
.swal2-popup .swal2-icon.swal2-question { border-color: var(--op-primary-light); color: var(--op-primary-light); }
/* select2 3.5.x (CDN on three pages) */
.select2-results .select2-highlighted { background: var(--op-primary); color: #fff; }
.select2-container-active .select2-choice, .select2-container-active .select2-choices, .select2-drop-active, .select2-dropdown-open .select2-choice { border-color: var(--op-primary-light); }
/* bootstrap-select */
.bootstrap-select .dropdown-toggle:focus { outline: 0 !important; box-shadow: 0 0 0 .2rem var(--op-focus); }
.bootstrap-select .bs-placeholder, .bootstrap-select .bs-placeholder:hover { color: var(--op-placeholder); }

/* ==========================================================================
   14. Status colours in the logo palette (no off-brand hue left anywhere)
   success = lime (navy text) · info = light indigo · warning = indigo tint
   danger = deep navy · secondary = logo grey
   ========================================================================== */
:root {
  --op-success: #8dc63f; --op-success-hover: #7fb239; --op-success-ink: #1e1b4b; --op-success-text: #557726; --op-success-soft: #eef6e2;
  --op-info: #4a4fb8; --op-info-hover: #3f44a6; --op-info-soft: #f0f0f7;
  --op-warning: #e6e6f2; --op-warning-hover: #d9d9ee; --op-warning-ink: #2e3192; --op-warning-line: #c0c1de;
  --op-danger: #1e1b4b; --op-danger-hover: #15133a; --op-danger-soft: #e6e6f2;
  --op-secondary: #6b6e75; --op-secondary-hover: #5b5e65;
}
/* buttons (both Bootstrap builds + Elisyam) */
.btn-success, #wrapper .btn-success { color: var(--op-success-ink) !important; background-color: var(--op-success) !important; border-color: var(--op-success) !important; }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active, .btn-success.active, #wrapper .btn-success:hover { color: var(--op-success-ink) !important; background-color: var(--op-success-hover) !important; border-color: var(--op-success-hover) !important; }
.btn-success i, .btn-success span { color: inherit !important; }
.btn-info, #wrapper .btn-info { color: #fff !important; background-color: var(--op-info) !important; border-color: var(--op-info) !important; }
.btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active, .btn-info.active, #wrapper .btn-info:hover { color: #fff !important; background-color: var(--op-info-hover) !important; border-color: var(--op-info-hover) !important; }
.btn-warning, #wrapper .btn-warning { color: var(--op-warning-ink) !important; background-color: var(--op-warning) !important; border-color: var(--op-warning-line) !important; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:not(:disabled):not(.disabled):active, .btn-warning.active, #wrapper .btn-warning:hover { color: var(--op-warning-ink) !important; background-color: var(--op-warning-hover) !important; border-color: var(--op-warning-line) !important; }
.btn-warning i, .btn-info i, .btn-danger i { color: inherit !important; }
.open-sidebar .btn-warning { color: #fff !important; background-color: var(--op-primary) !important; border-color: var(--op-primary) !important; }
.open-sidebar .btn-warning:hover { background-color: var(--op-primary-hover) !important; border-color: var(--op-primary-hover) !important; }
.btn-danger, #wrapper .btn-danger { color: #fff !important; background-color: var(--op-danger) !important; border-color: var(--op-danger) !important; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active, .btn-danger.active, #wrapper .btn-danger:hover { color: #fff !important; background-color: var(--op-danger-hover) !important; border-color: var(--op-danger-hover) !important; }
.btn-secondary, #wrapper .btn-secondary { color: #fff; background-color: var(--op-secondary); border-color: var(--op-secondary); }
.btn-secondary:hover, #wrapper .btn-secondary:hover { color: #fff; background-color: var(--op-secondary-hover); border-color: var(--op-secondary-hover); }
.btn-dark, #wrapper .btn-dark { color: #fff; background-color: var(--op-danger); border-color: var(--op-danger); }
.btn-pink, #wrapper .btn-pink { color: #fff; background-color: var(--op-info); border-color: var(--op-info); }
.btn-outline-success { color: var(--op-success-text) !important; border-color: var(--op-success) !important; background-color: transparent; }
.btn-outline-success:hover { color: var(--op-success-ink) !important; background-color: var(--op-success) !important; }
.btn-outline-info { color: var(--op-info) !important; border-color: var(--op-info) !important; background-color: transparent; }
.btn-outline-info:hover { color: #fff !important; background-color: var(--op-info) !important; }
.btn-outline-warning { color: var(--op-warning-ink) !important; border-color: var(--op-warning-line) !important; background-color: transparent; }
.btn-outline-warning:hover { background-color: var(--op-warning) !important; }
.btn-outline-danger { color: var(--op-danger) !important; border-color: var(--op-danger) !important; background-color: transparent; }
.btn-outline-danger:hover { color: #fff !important; background-color: var(--op-danger) !important; }
.btn-success:focus, .btn-info:focus, .btn-warning:focus, .btn-danger:focus, .btn-secondary:focus { box-shadow: 0 0 0 .2rem var(--op-focus) !important; }
.btn-gradient-04, .btn-gradient-04 a { background: linear-gradient(to right, var(--op-success-hover) 0%, var(--op-success) 100%) !important; color: var(--op-success-ink) !important; }
.btn-gradient-04:active, .btn-gradient-04.active { background: var(--op-success-hover) !important; }
.btn-gradient-04 i { color: var(--op-success-ink) !important; }
/* badges */
.badge-success, .badge-text.success, .badge-text.admin, .badge-rounded.success, #wrapper .badge-success { color: var(--op-success-ink) !important; background: var(--op-success) !important; }
.badge-info, .badge-text.info, .badge-rounded.info, #wrapper .badge-info, .badge-blue, .badge-pink { color: #fff !important; background: var(--op-info) !important; }
.badge-warning, .badge-text.warning, .badge-rounded.warning, #wrapper .badge-warning { color: var(--op-warning-ink) !important; background: var(--op-warning) !important; }
.badge-danger, .badge-text.danger, .badge-rounded.danger, #wrapper .badge-danger, .noti-icon-badge { color: #fff !important; background: var(--op-danger) !important; }
.badge-secondary { color: #fff; background-color: var(--op-secondary); }
.badge-dark { color: #fff; background-color: var(--op-danger); }
span.badge-pulse { background: var(--op-danger); animation: OpsisPulse 1.5s infinite; }
span.badge-pulse-green { background: var(--op-success); animation: OpsisPulseGreen 1.5s infinite; }
span.badge-pulse-blue { background: var(--op-info); animation: OpsisPulseBlue 1.5s infinite; }
@keyframes OpsisPulse { 0% { box-shadow: 0 0 0 0 rgba(30, 27, 75, .4); } 70% { box-shadow: 0 0 0 10px rgba(30, 27, 75, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 27, 75, 0); } }
@keyframes OpsisPulseGreen { 0% { box-shadow: 0 0 0 0 rgba(141, 198, 63, .4); } 70% { box-shadow: 0 0 0 10px rgba(141, 198, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(141, 198, 63, 0); } }
@keyframes OpsisPulseBlue { 0% { box-shadow: 0 0 0 0 rgba(74, 79, 184, .4); } 70% { box-shadow: 0 0 0 10px rgba(74, 79, 184, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 79, 184, 0); } }
#wrapper .badge-soft-success, #wrapper .bg-soft-success { color: #3f5a1c !important; background-color: var(--op-success-soft) !important; }
#wrapper .badge-soft-danger, #wrapper .bg-soft-danger, #wrapper .badge-soft-warning, #wrapper .bg-soft-warning { color: var(--op-primary) !important; background-color: var(--op-danger-soft) !important; }
#wrapper .badge-soft-info, #wrapper .bg-soft-info, #wrapper .badge-soft-blue, #wrapper .bg-soft-blue, #wrapper .badge-soft-pink, #wrapper .bg-soft-pink { color: var(--op-info) !important; background-color: var(--op-info-soft) !important; }
/* text / background / border utilities (all !important in the vendor builds) */
.text-success, .text-green, a.text-success:hover, a.text-success:focus { color: var(--op-success-text) !important; }
.text-info, .text-blue, a.text-info:hover { color: var(--op-info) !important; }
.text-warning, .text-orange, .text-yellow { color: var(--op-primary) !important; }
.text-danger, .text-red, .text-pink, a.text-danger:hover, a.text-danger:focus { color: var(--op-danger) !important; }
.bg-success, .bg-green { background-color: var(--op-success) !important; color: var(--op-success-ink); }
.bg-info, .bg-blue, .bg-pink, .bg-purple { background-color: var(--op-info) !important; }
.bg-warning, .bg-orange, .bg-yellow { background-color: var(--op-warning) !important; color: var(--op-warning-ink); }
.bg-danger, .bg-red, .bg-dark { background-color: var(--op-danger) !important; }
.border-success { border-color: var(--op-success) !important; }
.border-info { border-color: var(--op-info) !important; }
.border-warning { border-color: var(--op-warning-line) !important; }
.border-danger { border-color: var(--op-danger) !important; }
/* alerts (Elisyam solid, Bootstrap 4 + 3 soft) */
.alert-success { color: #3f5a1c; background-color: var(--op-success-soft); border-color: var(--op-success); }
.alert-info { color: var(--op-primary); background-color: var(--op-info-soft); border-color: var(--op-warning-line); }
.alert-warning { color: var(--op-primary); background-color: var(--op-warning); border-color: var(--op-warning-line); }
.alert-danger { color: #fff; background-color: var(--op-danger); border-color: var(--op-danger); }
.alert-danger .alert-link, .alert-danger a { color: #fff; }
.alert-outline-success, .alert-success-bordered { border-color: var(--op-success); box-shadow: 7px 0 0 0 var(--op-success) inset; }
.alert-outline-danger, .alert-danger-bordered { border-color: var(--op-danger); box-shadow: 7px 0 0 0 var(--op-danger) inset; }
.alert-outline-warning, .alert-warning-bordered { border-color: var(--op-warning-line); box-shadow: 7px 0 0 0 var(--op-primary) inset; }
.alert-outline-info, .alert-info-bordered { border-color: var(--op-info); box-shadow: 7px 0 0 0 var(--op-info) inset; }
/* form validation */
.invalid-feedback, .parsley-errors-list li, .text-error { color: var(--op-danger) !important; }
.has-danger .form-control, .form-control.is-invalid, .was-validated .form-control:invalid, .custom-select.is-invalid, .parsley-error { border-color: var(--op-danger) !important; }
.form-control.is-valid, .was-validated .form-control:valid, .custom-select.is-valid, .parsley-success { border-color: var(--op-success) !important; }
/* misc theme widgets carrying status hues */
.check.is-checked:after, .widget-10 span.open, .widget-11 .timeline.green:after { background: var(--op-success); }
.widget-10 span.closed, .widget-11 .timeline.red:after { background: var(--op-danger); }
.widget-10 span.pending, .widget-11 .timeline.blue:after { background: var(--op-info); }
.noty_type__error { background-color: var(--op-danger); border-color: var(--op-danger); }
.noty_type__success { background-color: var(--op-success); color: var(--op-success-ink); }
.noty_type__warning { background-color: var(--op-warning); color: var(--op-warning-ink); }
.noty_type__info, .noty_type__information { background-color: var(--op-info); }
.fc-bg-green, .fc-bg-blue, .fc-bg-red, .fc-bg-default { border-left-color: var(--op-primary) !important; }
.fc-bg-green .fc-title, .fc-bg-green .fc-time { color: var(--op-success-text) !important; }
.fc-bg-blue .fc-title, .fc-bg-blue .fc-time { color: var(--op-info) !important; }
.fc-bg-red .fc-title, .fc-bg-red .fc-time { color: var(--op-danger) !important; }
#wrapper .checkbox-success input[type=checkbox]:checked + label::before, #wrapper .radio-success input[type=radio]:checked + label::before { background-color: var(--op-success); border-color: var(--op-success); }
#wrapper .checkbox-danger input[type=checkbox]:checked + label::before { background-color: var(--op-danger); border-color: var(--op-danger); }
#wrapper .ribbon-box .ribbon-two-success span { background: var(--op-success); color: var(--op-success-ink); }
#wrapper .ribbon-box .ribbon-two-success span:before, #wrapper .ribbon-box .ribbon-two-success span:after { border-left-color: #557726; border-top-color: #557726; border-right-color: #557726; }
#wrapper .ribbon-box .ribbon-two-warning span { background: var(--op-info); }
#wrapper .ribbon-box .ribbon-two-warning span:before, #wrapper .ribbon-box .ribbon-two-warning span:after { border-left-color: var(--op-primary-dark); border-top-color: var(--op-primary-dark); border-right-color: var(--op-primary-dark); }
#wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, #wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before { background-color: var(--op-danger); }
.swal2-icon.swal2-success { border-color: var(--op-success) !important; color: var(--op-success) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line], .swal2-icon.swal2-success .line { background-color: var(--op-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(141, 198, 63, .3) !important; }
.swal2-icon.swal2-error { border-color: var(--op-danger) !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--op-danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--op-warning-line) !important; color: var(--op-primary) !important; }
.swal2-icon.swal2-info { border-color: var(--op-info) !important; color: var(--op-info) !important; }
.swal2-modal .swal2-cancel.btn-cancel { background-color: var(--op-danger) !important; }
.sa-icon.sa-error { border-color: var(--op-danger); }
.sa-icon.sa-error .sa-line { background-color: var(--op-danger); }
.sa-icon.sa-warning { border-color: var(--op-primary); }
.sa-icon.sa-warning .sa-body, .sa-icon.sa-warning .sa-dot { background-color: var(--op-primary); }
/* inline modal headers now written in indigo at the source */
.modal-header[style*="#2e3192"] .modal-title, .modal-header[style*="#2e3192"] .close, .modal-header[style*="#1e1b4b"] .modal-title, .modal-header[style*="#1e1b4b"] .close { color: #fff; opacity: .9; }
/* Leaflet map controls + attribution */
.leaflet-container a { color: var(--op-primary); }
.leaflet-bar a, .leaflet-bar a:hover { color: var(--op-dark); }
.leaflet-container a.leaflet-popup-close-button { color: var(--op-muted); }
.alert-outline-danger { color: var(--op-danger); border-color: var(--op-danger); }
.alert-outline-success { color: var(--op-success-text); border-color: var(--op-success); }
.alert-outline-info { color: var(--op-info); border-color: var(--op-info); }
.alert-outline-warning { color: var(--op-primary); border-color: var(--op-warning-line); }
.alert-outline-secondary { color: var(--op-muted); border-color: var(--op-hairline); }
.btn-secondary, .alert-secondary { border-color: var(--op-secondary); }