/* ITCC - UTMStack theme inspired by Cortex XSIAM (dark, lime + cyan accents).
   html:not(#itcc) prefix = ID-level specificity, so it wins over
   Angular-scoped [_ngcontent] rules. Served by the host nginx at /itcc-theme/itcc-xsiam.css and injected
   before </head>. Remove the sub_filter lines to roll back. */

:root {
  --itcc-bg: #0e1217;
  --itcc-surface: #161b22;
  --itcc-surface-2: #1d232c;
  --itcc-chrome: #0a0d11;
  --itcc-border: #2a323d;
  --itcc-text: #e6edf3;
  --itcc-muted: #b3bdcb;
  --itcc-lime: #a3e635;
  --itcc-lime-hover: #bef264;
  --itcc-cyan: #22d3ee;
  --itcc-blue: #1066a6;            /* ITCC logo blue */
  --itcc-on-accent: #0a0d11;

  --primary: var(--itcc-cyan);
  --info: var(--itcc-cyan);
  --success: var(--itcc-lime);
  --dark: var(--itcc-chrome);
  --light: var(--itcc-surface-2);
}

/* ---------- Page ---------- */
html,
body,
html:not(#itcc) .page-content,
html:not(#itcc) .content-wrapper,
html:not(#itcc) .content,
html:not(#itcc) .page-header,
html:not(#itcc) .page-header-light,
html:not(#itcc) .bg-light,
html:not(#itcc) .bg-white,
html:not(#itcc) .navbar-light,
html:not(#itcc) .sidebar-light {
  background-color: var(--itcc-bg) !important;
  color: var(--itcc-text) !important;
}
body,
html:not(#itcc) .text-default,
html:not(#itcc) .text-body,
html:not(#itcc) .text-dark,
html:not(#itcc) h1,
html:not(#itcc) h2,
html:not(#itcc) h3,
html:not(#itcc) h4,
html:not(#itcc) h5,
html:not(#itcc) h6,
html:not(#itcc) .h1,
html:not(#itcc) .h2,
html:not(#itcc) .h3,
html:not(#itcc) .h4,
html:not(#itcc) .h5,
html:not(#itcc) .h6,
html:not(#itcc) label,
html:not(#itcc) .card-title,
html:not(#itcc) .card-header span {
  color: var(--itcc-text) !important;
}
html:not(#itcc) .text-muted,
html:not(#itcc) .text-grey,
html:not(#itcc) .text-secondary,
html:not(#itcc) small,
html:not(#itcc) .form-text,
html:not(#itcc) .breadcrumb-item {
  color: var(--itcc-muted) !important;
}
html:not(#itcc) a,
html:not(#itcc) .btn-link,
html:not(#itcc) .text-primary,
html:not(#itcc) .text-blue-800,
html:not(#itcc) .text-info { color: var(--itcc-cyan) !important; }
html:not(#itcc) a:hover,
html:not(#itcc) .btn-link:hover { color: var(--itcc-lime) !important; }
html:not(#itcc) hr,
html:not(#itcc) .border,
html:not(#itcc) .border-top,
html:not(#itcc) .border-bottom,
html:not(#itcc) .border-left,
html:not(#itcc) .border-right,
html:not(#itcc) .border-grey,
html:not(#itcc) .utm-box { border-color: var(--itcc-border) !important; }
::selection { background: rgba(163, 230, 53, .35); }

/* ---------- Top navbar ---------- */
html:not(#itcc) .utm-navbar,
html:not(#itcc) .navbar-dark,
html:not(#itcc) .navbar.bg-dark,
html:not(#itcc) .bg-dark {
  background-color: var(--itcc-chrome) !important;
  border-bottom: 1px solid var(--itcc-border) !important;
  box-shadow: inset 0 -2px 0 0 var(--itcc-lime);
}
html:not(#itcc) .utm-navbar .navbar-img img,
html:not(#itcc) .navbar-img img {
  height: 30px !important;
  width: auto !important;
}
html:not(#itcc) .utm-navbar-secondary,
html:not(#itcc) .navbar-light,
html:not(#itcc) .utm-navbar-container {
  background-color: var(--itcc-surface) !important;
  border-color: var(--itcc-border) !important;
}
html:not(#itcc) .utm-nav-link,
html:not(#itcc) .navbar-nav-link,
html:not(#itcc) .navbar .nav-link,
html:not(#itcc) .navbar-nav .nav-link {
  color: var(--itcc-muted) !important;
}
html:not(#itcc) .utm-nav-link:hover,
html:not(#itcc) .navbar-nav-link:hover,
html:not(#itcc) .navbar .nav-link:hover,
html:not(#itcc) .navbar .nav-item.active .utm-nav-link,
html:not(#itcc) .navbar .nav-item .active,
html:not(#itcc) .utm-nav-link.active,
html:not(#itcc) .navbar-nav-link.active {
  color: var(--itcc-lime) !important;
}
html:not(#itcc) .navbar .nav-item.active,
html:not(#itcc) .utm-nav-link.active {
  box-shadow: inset 0 -2px 0 0 var(--itcc-lime);
}

/* ---------- Sidebar ---------- */
html:not(#itcc) .sidebar,
html:not(#itcc) .sidebar-main,
html:not(#itcc) .sidebar-light,
html:not(#itcc) .sidebar-content {
  background-color: var(--itcc-chrome) !important;
  border-color: var(--itcc-border) !important;
  color: var(--itcc-muted) !important;
}
html:not(#itcc) .sidebar .nav-link,
html:not(#itcc) .nav-sidebar .nav-link { color: var(--itcc-muted) !important; }
html:not(#itcc) .sidebar .nav-link:hover,
html:not(#itcc) .nav-sidebar .nav-link:hover {
  background-color: var(--itcc-surface-2) !important;
  color: var(--itcc-text) !important;
}
html:not(#itcc) .sidebar .nav-link.active,
html:not(#itcc) .nav-sidebar .nav-link.active,
html:not(#itcc) .nav-sidebar .nav-item-open > .nav-link {
  background-color: rgba(163, 230, 53, .10) !important;
  color: var(--itcc-lime) !important;
  box-shadow: inset 3px 0 0 0 var(--itcc-lime);
}

/* ---------- Cards, panels, modals, dropdowns ---------- */
html:not(#itcc) .card,
html:not(#itcc) .card-body,
html:not(#itcc) .card-header,
html:not(#itcc) .card-footer,
html:not(#itcc) .modal-content,
html:not(#itcc) .modal-header,
html:not(#itcc) .modal-body,
html:not(#itcc) .modal-footer,
html:not(#itcc) .dropdown-menu,
html:not(#itcc) .popover,
html:not(#itcc) .popover-body,
html:not(#itcc) .list-group-item,
html:not(#itcc) .utm-box .utm-box-label,
html:not(#itcc) .panel,
html:not(#itcc) .well,
html:not(#itcc) .jumbotron,
html:not(#itcc) .toast,
html:not(#itcc) .ngb-dp-header,
html:not(#itcc) .ngb-dp-weekdays,
html:not(#itcc) .ngb-dp-month-name,
html:not(#itcc) ngb-datepicker {
  background-color: var(--itcc-surface) !important;
  border-color: var(--itcc-border) !important;
  color: var(--itcc-text) !important;
}
html:not(#itcc) .card { box-shadow: 0 1px 0 0 rgba(255, 255, 255, .02), 0 4px 16px rgba(0, 0, 0, .35) !important; }
html:not(#itcc) .card-header { border-bottom: 1px solid var(--itcc-border) !important; }
html:not(#itcc) .card-selected,
html:not(#itcc) .card.active { box-shadow: 0 0 0 1px var(--itcc-lime) !important; }
html:not(#itcc) .dropdown-item,
html:not(#itcc) .dropdown-menu a { color: var(--itcc-text) !important; }
html:not(#itcc) .dropdown-item:hover,
html:not(#itcc) .dropdown-item:focus,
html:not(#itcc) .dropdown-item.active {
  background-color: var(--itcc-surface-2) !important;
  color: var(--itcc-lime) !important;
}
html:not(#itcc) .modal-backdrop.show { opacity: .7 !important; }
html:not(#itcc) .close,
html:not(#itcc) .btn-close { color: var(--itcc-text) !important; text-shadow: none !important; }

/* ---------- Tables ---------- */
html:not(#itcc) .table,
html:not(#itcc) table { color: var(--itcc-text) !important; background-color: transparent !important; }
html:not(#itcc) .table th,
html:not(#itcc) .table td,
html:not(#itcc) .table thead th,
html:not(#itcc) table th,
html:not(#itcc) table td { border-color: var(--itcc-border) !important; }
html:not(#itcc) .table thead th,
html:not(#itcc) table thead th,
html:not(#itcc) .thead-light th {
  background-color: var(--itcc-surface-2) !important;
  color: var(--itcc-muted) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}
html:not(#itcc) .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .02) !important; }
html:not(#itcc) .table-hover tbody tr:hover,
html:not(#itcc) table tbody tr:hover { background-color: rgba(34, 211, 238, .06) !important; }

/* ---------- Forms ---------- */
html:not(#itcc) .form-control,
html:not(#itcc) .custom-select,
html:not(#itcc) select,
html:not(#itcc) textarea,
html:not(#itcc) input[type="text"],
html:not(#itcc) input[type="password"],
html:not(#itcc) input[type="email"],
html:not(#itcc) input[type="number"],
html:not(#itcc) input[type="search"],
html:not(#itcc) .ng-select .ng-select-container,
html:not(#itcc) .ng-dropdown-panel,
html:not(#itcc) .ng-dropdown-panel .ng-option,
html:not(#itcc) .input-group-text {
  background-color: var(--itcc-bg) !important;
  border-color: var(--itcc-border) !important;
  color: var(--itcc-text) !important;
}
html:not(#itcc) .form-control::placeholder,
html:not(#itcc) .ng-placeholder { color: #6b7684 !important; }
html:not(#itcc) .form-control:focus,
html:not(#itcc) .custom-select:focus,
html:not(#itcc) .ng-select.ng-select-focused .ng-select-container {
  border-color: var(--itcc-cyan) !important;
  box-shadow: 0 0 0 .15rem rgba(34, 211, 238, .25) !important;
}
html:not(#itcc) .ng-dropdown-panel .ng-option.ng-option-marked { background-color: var(--itcc-surface-2) !important; }
html:not(#itcc) .ng-dropdown-panel .ng-option.ng-option-selected { color: var(--itcc-lime) !important; }
html:not(#itcc) .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--itcc-lime) !important;
  border-color: var(--itcc-lime) !important;
}

/* ---------- Buttons ---------- */
html:not(#itcc) .btn-primary,
html:not(#itcc) .utm-button-primary,
html:not(#itcc) .bg-primary,
html:not(#itcc) .badge-primary {
  background-color: var(--itcc-lime) !important;
  border-color: var(--itcc-lime) !important;
  color: var(--itcc-on-accent) !important;
  font-weight: 600;
}
html:not(#itcc) .btn-primary:hover,
html:not(#itcc) .utm-button-primary:hover {
  background-color: var(--itcc-lime-hover) !important;
  border-color: var(--itcc-lime-hover) !important;
  box-shadow: 0 0 0 3px rgba(163, 230, 53, .2) !important;
}
html:not(#itcc) .btn-outline-primary,
html:not(#itcc) .utm-button-outline-primary {
  color: var(--itcc-cyan) !important;
  border-color: var(--itcc-cyan) !important;
  background-color: transparent !important;
}
html:not(#itcc) .btn-outline-primary:hover,
html:not(#itcc) .utm-button-outline-primary:hover {
  background-color: rgba(34, 211, 238, .12) !important;
}
html:not(#itcc) .btn-light,
html:not(#itcc) .btn-secondary,
html:not(#itcc) .utm-button-grey,
html:not(#itcc) .btn-outline-secondary,
html:not(#itcc) .btn-outline-dark {
  background-color: var(--itcc-surface-2) !important;
  border-color: var(--itcc-border) !important;
  color: var(--itcc-text) !important;
}
html:not(#itcc) .btn-light:hover,
html:not(#itcc) .btn-secondary:hover,
html:not(#itcc) .utm-button-grey:hover { border-color: var(--itcc-cyan) !important; }

/* ---------- Tabs, pagination, badges ---------- */
html:not(#itcc) .nav-tabs { border-color: var(--itcc-border) !important; }
html:not(#itcc) .nav-tabs .nav-link { color: var(--itcc-muted) !important; background: transparent !important; border-color: transparent !important; }
html:not(#itcc) .nav-tabs .nav-link.active,
html:not(#itcc) .nav-tabs .nav-item.show .nav-link {
  color: var(--itcc-lime) !important;
  border-bottom: 2px solid var(--itcc-lime) !important;
}
html:not(#itcc) .page-link { background-color: var(--itcc-surface) !important; border-color: var(--itcc-border) !important; color: var(--itcc-text) !important; }
html:not(#itcc) .page-item.active .page-link { background-color: var(--itcc-lime) !important; border-color: var(--itcc-lime) !important; color: var(--itcc-on-accent) !important; }
html:not(#itcc) .page-item.disabled .page-link { color: #5b6573 !important; }
html:not(#itcc) .badge-info,
html:not(#itcc) .bg-info,
html:not(#itcc) .bg-info-300,
html:not(#itcc) .bg-info-400 { background-color: var(--itcc-cyan) !important; color: var(--itcc-on-accent) !important; }
html:not(#itcc) .badge-success,
html:not(#itcc) .bg-success,
html:not(#itcc) .bg-success-300,
html:not(#itcc) .bg-success-400 { background-color: var(--itcc-lime) !important; color: var(--itcc-on-accent) !important; }

/* ---------- Login ---------- */
html:not(#itcc) .utm-auth-cover,
html:not(#itcc) .bg-image-utmstack,
html:not(#itcc) .bg-image-utmstack-blurry {
  background: radial-gradient(1200px 600px at 15% 10%, rgba(34, 211, 238, .10), transparent 60%),
              radial-gradient(900px 500px at 90% 90%, rgba(163, 230, 53, .08), transparent 60%),
              var(--itcc-bg) !important;
}
html:not(#itcc) .utm-auth-cover .card,
html:not(#itcc) .w-350px {
  background-color: rgba(22, 27, 34, .92) !important;
  border: 1px solid var(--itcc-border) !important;
  border-top: 3px solid var(--itcc-lime) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55) !important;
}
html:not(#itcc) .login-pic img,
html:not(#itcc) .utm-auth-cover img { max-height: 170px; width: auto; }

/* Page 2FA (UTMStack v11) : encarts à fond clair codé en dur (#f8fafc, #fffbeb)
   alors que le thème éclaircit le texte -> blanc sur blanc. 08/11/2026 */
html:not(#itcc) .utm-auth-cover .method-info,
html:not(#itcc) .utm-auth-cover .method-info:hover {
  background-color: var(--itcc-surface-2) !important;
  border: 1px solid var(--itcc-border) !important;
}
html:not(#itcc) .utm-auth-cover .method-icon { background-color: rgba(34, 211, 238, .15) !important; }
html:not(#itcc) .utm-auth-cover .method-icon i,
html:not(#itcc) .utm-auth-cover .method-icon svg { color: var(--itcc-cyan) !important; }
html:not(#itcc) .utm-auth-cover .method-details .text-muted { color: var(--itcc-muted) !important; }
html:not(#itcc) .utm-auth-cover [style*="#fffbeb"],
html:not(#itcc) .utm-auth-cover [style*="255, 251, 235"] {
  background-color: rgba(245, 158, 11, .10) !important;
  border: 1px solid rgba(245, 158, 11, .45) !important;
}
html:not(#itcc) .utm-auth-cover [style*="#fffbeb"] small,
html:not(#itcc) .utm-auth-cover [style*="255, 251, 235"] small { color: var(--itcc-muted) !important; }
html:not(#itcc) .utm-auth-cover [style*="#fffbeb"] strong,
html:not(#itcc) .utm-auth-cover [style*="255, 251, 235"] strong { color: #fbbf24 !important; }
html:not(#itcc) .utm-auth-cover .btn-link,
html:not(#itcc) .utm-auth-cover .btn-link .txt2 { color: var(--itcc-cyan) !important; opacity: 1 !important; }

/* Écran de chargement (index.html de UTMStack, texte remplacé par itcc-subfilter.conf) */
html:not(#itcc) #app-loading { background: var(--itcc-bg) !important; }
html:not(#itcc) #app-loading .loading-text { color: var(--itcc-text) !important; }
html:not(#itcc) #app-loading .loading-subtext { color: var(--itcc-muted) !important; }
html:not(#itcc) #app-loading .spinner { color: var(--itcc-lime) !important; }

/* ---------- UTMStack panels that hard-code white ---------- */
html:not(#itcc) .card .card-header-chart,
html:not(#itcc) .card-header-chart,
html:not(#itcc) .card-header-inactive,
html:not(#itcc) .sortable-header,
html:not(#itcc) .popover-header,
html:not(#itcc) .custom-panel,
html:not(#itcc) .overview-card,
html:not(#itcc) .overview-create-card,
html:not(#itcc) .provider-card,
html:not(#itcc) .card-source,
html:not(#itcc) .playbook-item-card,
html:not(#itcc) .metric-data-container,
html:not(#itcc) .panel-heading,
html:not(#itcc) .panel-body,
html:not(#itcc) .editor-header,
html:not(#itcc) app-utm-modal-header,
html:not(#itcc) .list-group-header,
html:not(#itcc) .toastr,
html:not(#itcc) .agent-card,
html:not(#itcc) .condition-block,
html:not(#itcc) .playbook-trigger-header,
html:not(#itcc) .leaflet-control-layers,
html:not(#itcc) .intl-tel-input .country-list {
  background-color: var(--itcc-surface) !important;
  border-color: var(--itcc-border) !important;
  color: var(--itcc-text) !important;
  box-shadow: none !important;
}
html:not(#itcc) .card-header-chart { border-bottom: 1px solid var(--itcc-border) !important; }
html:not(#itcc) .card-header-chart span,
html:not(#itcc) .card-header-chart .text-blue-800,
html:not(#itcc) .card-header-chart a { color: var(--itcc-cyan) !important; }
html:not(#itcc) .card-header-chart .text-muted,
html:not(#itcc) .card-header-chart small,
html:not(#itcc) .card-header-chart i { color: var(--itcc-muted) !important; }
html:not(#itcc) .table td,
html:not(#itcc) .table th,
html:not(#itcc) table td,
html:not(#itcc) table th { background-color: transparent !important; }
html:not(#itcc) table tbody tr,
html:not(#itcc) table tbody tr:nth-child(odd) { background-color: transparent !important; }
html:not(#itcc) table tbody tr:nth-child(even),
html:not(#itcc) .table-striped tbody tr:nth-of-type(even) { background-color: rgba(255, 255, 255, .035) !important; }
html:not(#itcc) table tbody tr:hover { background-color: rgba(34, 211, 238, .07) !important; }
html:not(#itcc) table tbody td a,
html:not(#itcc) table tbody td .text-blue-800 { color: var(--itcc-cyan) !important; }
html:not(#itcc) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option { background-color: var(--itcc-surface) !important; color: var(--itcc-text) !important; }
html:not(#itcc) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked { background-color: var(--itcc-surface-2) !important; color: var(--itcc-lime) !important; }

/* ---------- Misc ---------- */
html:not(#itcc) .alert { border-color: var(--itcc-border) !important; }
html:not(#itcc) .alert-info { background-color: rgba(34, 211, 238, .1) !important; color: var(--itcc-text) !important; }
html:not(#itcc) .alert-warning { background-color: rgba(250, 204, 21, .1) !important; color: var(--itcc-text) !important; }
html:not(#itcc) .tooltip-inner { background-color: var(--itcc-surface-2) !important; color: var(--itcc-text) !important; border: 1px solid var(--itcc-border); }
html:not(#itcc) .spinner,
html:not(#itcc) .icon-spinner2,
html:not(#itcc) .utm-spinner { color: var(--itcc-lime) !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--itcc-bg); }
::-webkit-scrollbar-thumb { background: var(--itcc-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4452; }
::-webkit-scrollbar-corner { background: var(--itcc-bg); }

/* ---------- ITCC logos (server-side, no upload needed) ----------
   Header: <img alt="UTM"> inside .navbar-img; login: <img alt="Login">.
   PDF report images (.img-front-page) are left to Settings > Application theme. */
html:not(#itcc) .navbar-img img,
html:not(#itcc) img[alt="UTM"] {
  content: url(/itcc-theme/itcc-header-dark.png);
  height: 36px !important;
  width: auto !important;
}
html:not(#itcc) img[alt="Login"]:not(.img-front-page) {
  content: url(/itcc-theme/itcc-login-dark.png);
  max-height: 190px !important;
  width: auto !important;
}

/* Account-based landing: hide the console while the account is checked (see itcc-xsiam.js). */
html.itcc-routing body { visibility: hidden !important; }