/*
 * Fluent 2 skin for the Bootstrap/Beagle-classed markup the Angular screens still render (Phase 1b "Look", spec section 2).
 *
 * index.html links this file for every company and puts the lhq-fluent2 class on <html> (there is no per-company switch any more).
 * - Scope: every rule is scoped under html.lhq-fluent2, so nothing changes while the class is absent. The scope also
 *   outranks the same Beagle selector.
 * - !important: used only against Beagle and plugin rules that force their own values (selectize, the modal header,
 *   toastr). ClientApp/shell-tests/skin-css.test.mjs enforces both rules.
 * - Values: all come from lhq-tokens.css.
 * - Syncfusion components are not styled here: the bundle's own Fluent 2 theme (/UI/ng/styles.css) and the variables
 *   lhq-tokens.css maps onto it cover them.
 */

/* ---- Base type and surfaces ---- */
html.lhq-fluent2 body,
html.lhq-fluent2 button,
html.lhq-fluent2 input,
html.lhq-fluent2 select,
html.lhq-fluent2 textarea,
html.lhq-fluent2 h1,
html.lhq-fluent2 h2,
html.lhq-fluent2 h3,
html.lhq-fluent2 h4,
html.lhq-fluent2 h5,
html.lhq-fluent2 h6 {
  font-family: var(--lhq-font);
}

html.lhq-fluent2 body {
  color: var(--lhq-neutral-900);
  background-color: var(--lhq-neutral-50);
}

html.lhq-fluent2 .be-content,
html.lhq-fluent2 .main-content {
  background-color: var(--lhq-neutral-50);
}

/* ---- Shell: top bar ---- */
html.lhq-fluent2 .be-top-header {
  background-color: var(--lhq-neutral-0);
  border-bottom: 1px solid var(--lhq-neutral-200);
  box-shadow: none;
}

html.lhq-fluent2 .be-top-header .page-title {
  color: var(--lhq-neutral-900);
  font-weight: 600;
}

html.lhq-fluent2 .be-top-header .be-user-nav > li > .nav-link {
  color: var(--lhq-neutral-700);
}

html.lhq-fluent2 .app-update-banner {
  background: var(--lhq-brand);
}

/* ---- Shell: left menu. Icons keep their section Color (inline ng-style), untouched here. ---- */
html.lhq-fluent2 .be-left-sidebar {
  background-color: var(--lhq-neutral-50);
  border-right: 1px solid var(--lhq-neutral-200);
}

html.lhq-fluent2 .be-left-sidebar .sidebar-elements li > a {
  color: var(--lhq-neutral-700);
  border-radius: var(--lhq-radius-s);
}

html.lhq-fluent2 .be-left-sidebar .sidebar-elements li > a:hover {
  background-color: var(--lhq-neutral-100);
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .be-left-sidebar .sidebar-elements li > a:hover > span {
  color: inherit;
}

/* The selected item is the li.active that BodyController.menuClick sets. It gets a bar and a tint in the section colour
   (spec decision 3); the neutral background is the fallback for browsers without color-mix. */
html.lhq-fluent2 .be-left-sidebar .sidebar-elements li.active > a {
  color: var(--lhq-neutral-900);
  font-weight: 600;
  background-color: var(--lhq-neutral-100);
  background-color: color-mix(in srgb, var(--lhq-section) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--lhq-section);
}

html.lhq-fluent2 .be-left-sidebar .sidebar-elements li.active > a > span {
  color: inherit;
}

html.lhq-fluent2 .p4-menu-search__results li > a:hover {
  background-color: var(--lhq-neutral-100);
}

html.lhq-fluent2 .p4-menu-search__path {
  color: var(--lhq-neutral-600);
}

/* ---- Dropdowns: the user menu, uib-dropdown and the chat panel ---- */
html.lhq-fluent2 .dropdown-menu {
  border: 1px solid var(--lhq-neutral-200);
  border-radius: var(--lhq-radius-m);
  box-shadow: var(--lhq-shadow-dialog);
}

html.lhq-fluent2 .dropdown-item {
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .dropdown-item:hover,
html.lhq-fluent2 .dropdown-item:focus {
  background-color: var(--lhq-neutral-100);
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .dropdown-item.active,
html.lhq-fluent2 .dropdown-item:active {
  background-color: var(--lhq-brand-tint);
  color: var(--lhq-neutral-900);
}

/* ---- Page cards ---- */
html.lhq-fluent2 .card {
  background-color: var(--lhq-neutral-0);
  border: 1px solid var(--lhq-neutral-200);
  border-radius: var(--lhq-radius-m);
  box-shadow: var(--lhq-shadow-card);
}

/* The top edge 129 screens already carry becomes the page's section colour (spec 2.2). */
html.lhq-fluent2 .card-border-color {
  border-top: 3px solid var(--lhq-section);
}

html.lhq-fluent2 .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--lhq-neutral-200);
  color: var(--lhq-neutral-900);
  font-weight: 600;
}

html.lhq-fluent2 .card-subtitle {
  color: var(--lhq-neutral-600);
}

/* ---- Links in page content (grid cells, detail links). Links with a class keep their component's colour. ---- */
html.lhq-fluent2 .main-content a:not([class]) {
  color: var(--lhq-brand-text);
}

html.lhq-fluent2 .main-content a:not([class]):hover {
  color: var(--lhq-brand-hover);
}

/* ---- Buttons. Primary is the one app blue; section colours never reach buttons (spec decision 3). ---- */
html.lhq-fluent2 .btn {
  border-radius: var(--lhq-radius-s);
  font-weight: 600;
  box-shadow: none;
}

html.lhq-fluent2 .btn:focus,
html.lhq-fluent2 .btn.focus {
  box-shadow: none;
}

html.lhq-fluent2 .btn:focus-visible {
  box-shadow: var(--lhq-focus-ring);
  outline: none;
}

html.lhq-fluent2 .btn-primary {
  background-color: var(--lhq-brand);
  border-color: var(--lhq-brand);
  color: var(--lhq-on-brand);
}

html.lhq-fluent2 .btn-primary:hover,
html.lhq-fluent2 .btn-primary:focus {
  background-color: var(--lhq-brand-hover);
  border-color: var(--lhq-brand-hover);
  color: var(--lhq-on-brand);
}

html.lhq-fluent2 .btn-primary:not(:disabled):not(.disabled):active,
html.lhq-fluent2 .btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--lhq-brand-pressed);
  border-color: var(--lhq-brand-pressed);
  color: var(--lhq-on-brand);
}

html.lhq-fluent2 .btn-secondary,
html.lhq-fluent2 .btn-default,
html.lhq-fluent2 .btn-light {
  background-color: var(--lhq-neutral-0);
  border-color: var(--lhq-neutral-300);
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .btn-secondary:hover,
html.lhq-fluent2 .btn-secondary:focus,
html.lhq-fluent2 .btn-default:hover,
html.lhq-fluent2 .btn-default:focus,
html.lhq-fluent2 .btn-light:hover,
html.lhq-fluent2 .btn-light:focus {
  background-color: var(--lhq-neutral-100);
  border-color: var(--lhq-neutral-300);
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .btn-secondary:not(:disabled):not(.disabled):active,
html.lhq-fluent2 .btn-default:not(:disabled):not(.disabled):active,
html.lhq-fluent2 .btn-light:not(:disabled):not(.disabled):active {
  background-color: var(--lhq-neutral-200);
  border-color: var(--lhq-neutral-300);
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .btn-danger {
  background-color: var(--lhq-neutral-0);
  border-color: var(--lhq-status-danger);
  color: var(--lhq-status-danger);
}

html.lhq-fluent2 .btn-danger:hover,
html.lhq-fluent2 .btn-danger:focus {
  background-color: var(--lhq-status-danger-bg);
  border-color: var(--lhq-status-danger);
  color: var(--lhq-status-danger);
}

html.lhq-fluent2 .btn-danger:not(:disabled):not(.disabled):active {
  background-color: var(--lhq-status-danger-fill);
  border-color: var(--lhq-status-danger);
  color: var(--lhq-on-brand);
}

/* Last in the button block: ties with the :hover rules above resolve by order. The #707070 on #F0F0F0 text (4.35:1) is deliberate: WCAG 2.x exempts inactive controls from contrast minimums. */
html.lhq-fluent2 .btn:disabled,
html.lhq-fluent2 .btn.disabled {
  background-color: var(--lhq-neutral-100);
  border-color: var(--lhq-neutral-200);
  color: var(--lhq-neutral-500);
  opacity: 1;
}

/* ---- Form fields ---- */
html.lhq-fluent2 .form-control {
  background-color: var(--lhq-neutral-0);
  border: 1px solid var(--lhq-neutral-300);
  border-bottom-color: var(--lhq-neutral-500);
  border-radius: var(--lhq-radius-s);
  color: var(--lhq-neutral-900);
  box-shadow: none;
}

html.lhq-fluent2 .form-control:hover {
  border-bottom-color: var(--lhq-neutral-700);
}

/* Fluent's focus underline: a coloured bottom border plus an inset shadow, so the field never grows a pixel. */
html.lhq-fluent2 .form-control:focus {
  border-color: var(--lhq-neutral-300);
  border-bottom-color: var(--lhq-brand);
  box-shadow: inset 0 -1px 0 var(--lhq-brand);
  outline: none;
}

html.lhq-fluent2 .form-control::placeholder {
  color: var(--lhq-neutral-500);
}

html.lhq-fluent2 .form-control:disabled,
html.lhq-fluent2 .form-control[readonly] {
  background-color: var(--lhq-neutral-50);
  border-bottom-color: var(--lhq-neutral-300);
  color: var(--lhq-neutral-600);
}

html.lhq-fluent2 .col-form-label,
html.lhq-fluent2 .form-group > label {
  color: var(--lhq-neutral-700);
}

/* ---- p4-checkbox (styles.css draws the box in ::after and the tick glyph in ::before) ---- */
html.lhq-fluent2 .custom-checkbox .custom-control-input ~ .p4-custom-control-label::after {
  border-color: var(--lhq-neutral-500);
  border-radius: var(--lhq-radius-s);
}

html.lhq-fluent2 .custom-checkbox .custom-control-input:checked ~ .p4-custom-control-label::after {
  border-color: var(--lhq-brand);
}

html.lhq-fluent2 .custom-checkbox .custom-control-input ~ .p4-custom-control-label::before {
  color: var(--lhq-brand-text);
}

html.lhq-fluent2 .custom-checkbox .custom-control-input:focus-visible ~ .p4-custom-control-label::after {
  box-shadow: var(--lhq-focus-ring);
}

/* ---- ui-select (selectize theme). styles.css forces these with !important, so the skin answers in kind. ---- */
html.lhq-fluent2 .selectize-input {
  background-color: var(--lhq-neutral-0) !important;
  border: 1px solid var(--lhq-neutral-300) !important;
  border-bottom-color: var(--lhq-neutral-500) !important;
  border-radius: var(--lhq-radius-s) !important;
}

html.lhq-fluent2 .selectize-input.focus {
  border-bottom-color: var(--lhq-brand) !important;
  box-shadow: inset 0 -1px 0 var(--lhq-brand) !important;
}

html.lhq-fluent2 .selectize-dropdown {
  border-color: var(--lhq-neutral-200) !important;
  border-radius: var(--lhq-radius-m);
  box-shadow: var(--lhq-shadow-dialog) !important;
}

html.lhq-fluent2 .selectize-dropdown .active {
  background-color: var(--lhq-brand-tint);
  color: var(--lhq-neutral-900);
}

/* ---- Date pickers: bootstrap-datetimepicker and angular-moment-picker ---- */
html.lhq-fluent2 .datetimepicker {
  border-radius: var(--lhq-radius-m);
  box-shadow: var(--lhq-shadow-dialog);
}

html.lhq-fluent2 .datetimepicker table tr td.active,
html.lhq-fluent2 .datetimepicker table tr td.active:hover,
html.lhq-fluent2 .datetimepicker table tr td span.active,
html.lhq-fluent2 .datetimepicker table tr td span.active:hover {
  background-color: var(--lhq-brand);
  background-image: none;
  color: var(--lhq-on-brand);
  text-shadow: none;
}

html.lhq-fluent2 .datetimepicker table tr td.today {
  box-shadow: inset 0 0 0 1px var(--lhq-brand);
}

html.lhq-fluent2 .moment-picker .moment-picker-container {
  border-radius: var(--lhq-radius-m);
  box-shadow: var(--lhq-shadow-dialog);
  font-family: var(--lhq-font);
}

html.lhq-fluent2 .moment-picker td.selected {
  background: var(--lhq-brand);
  border-color: var(--lhq-brand);
  color: var(--lhq-on-brand);
  text-shadow: none;
}

html.lhq-fluent2 .moment-picker td.highlighted {
  background: var(--lhq-brand-tint);
}

/* ---- Plain tables and pagination ---- */
html.lhq-fluent2 .table {
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .table thead th {
  background-color: var(--lhq-neutral-50);
  border-bottom: 1px solid var(--lhq-neutral-200);
  color: var(--lhq-neutral-700);
  font-weight: 600;
}

html.lhq-fluent2 .table td,
html.lhq-fluent2 .table th {
  border-top-color: var(--lhq-neutral-200);
}

html.lhq-fluent2 .table-hover tbody tr:hover,
html.lhq-fluent2 .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--lhq-neutral-50);
}

html.lhq-fluent2 .pagination .page-link,
html.lhq-fluent2 .pagination > li > a {
  border-color: var(--lhq-neutral-200);
  color: var(--lhq-brand-text);
}

html.lhq-fluent2 .pagination .page-item.active .page-link,
html.lhq-fluent2 .pagination > li.active > a {
  background-color: var(--lhq-brand);
  border-color: var(--lhq-brand);
  color: var(--lhq-on-brand);
}

/* ---- Tabs (nav-tabs and uib-tab). The underline is a shadow, so tabs never change height. It is brand blue here: section colour on tab underlines is kept for rebuilt screens (spec decision 3). ---- */
html.lhq-fluent2 .nav-tabs {
  border-bottom: 1px solid var(--lhq-neutral-200);
}

html.lhq-fluent2 .nav-tabs .nav-link,
html.lhq-fluent2 .nav-tabs > li > a {
  background-color: transparent;
  border-color: transparent;
  color: var(--lhq-neutral-700);
}

html.lhq-fluent2 .nav-tabs .nav-link:hover,
html.lhq-fluent2 .nav-tabs > li > a:hover {
  color: var(--lhq-neutral-900);
  box-shadow: inset 0 -3px 0 var(--lhq-neutral-300);
}

html.lhq-fluent2 .nav-tabs .nav-link.active,
html.lhq-fluent2 .nav-tabs .nav-item.show .nav-link,
html.lhq-fluent2 .nav-tabs > li.active > a,
html.lhq-fluent2 .nav-tabs > li.active > .nav-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--lhq-neutral-900);
  box-shadow: inset 0 -3px 0 var(--lhq-brand);
}

/* ---- Badges become Fluent pills with the fixed status palette (never section colours). ---- */
html.lhq-fluent2 .badge {
  border-radius: 999px;
  font-weight: 600;
}

html.lhq-fluent2 .badge-primary,
html.lhq-fluent2 .badge-info {
  background-color: var(--lhq-status-info-bg);
  color: var(--lhq-status-info);
}

html.lhq-fluent2 .badge-success {
  background-color: var(--lhq-status-success-bg);
  color: var(--lhq-status-success);
}

html.lhq-fluent2 .badge-warning {
  background-color: var(--lhq-status-warning-bg);
  color: var(--lhq-status-warning);
}

html.lhq-fluent2 .badge-danger {
  background-color: var(--lhq-status-danger-bg);
  color: var(--lhq-status-danger);
}

html.lhq-fluent2 .badge-secondary,
html.lhq-fluent2 .badge-light,
html.lhq-fluent2 .badge-default {
  background-color: var(--lhq-status-neutral-bg);
  color: var(--lhq-status-neutral);
}

/* ---- Modals (every modalHelper dialog). styles.css forces the header padding with !important. ---- */
html.lhq-fluent2 .modal-content {
  border: 0;
  border-radius: var(--lhq-radius-m);
  box-shadow: var(--lhq-shadow-dialog);
}

html.lhq-fluent2 .modal-header {
  border-bottom: 0;
  padding: 16px 24px 8px !important;
}

html.lhq-fluent2 .modal-title {
  color: var(--lhq-neutral-900);
  font-size: 20px;
  font-weight: 600;
}

html.lhq-fluent2 .modal-footer {
  border-top: 0;
}

/* ---- toastr. White text passes WCAG AA on every toast: success 6.3:1, danger 7.1:1, warning 8.0:1, info (brand) 5.4:1. ---- */
html.lhq-fluent2 #toast-container .toast {
  border-radius: var(--lhq-radius-m);
  box-shadow: var(--lhq-shadow-dialog);
  font-family: var(--lhq-font);
  opacity: 1;
}

html.lhq-fluent2 #toast-container .toast-success {
  background-color: var(--lhq-status-success-fill);
}

html.lhq-fluent2 #toast-container .toast-error {
  background-color: var(--lhq-status-danger-fill);
}

html.lhq-fluent2 #toast-container .toast-info {
  background-color: var(--lhq-brand);
}

html.lhq-fluent2 #toast-container .toast-warning {
  background-color: var(--lhq-status-warning-fill);
}

/* ---- Loading spinner ---- */
html.lhq-fluent2 .be-spinner svg .circle {
  stroke: var(--lhq-brand-text);
}

/* ---- Login page (it has no GetCurrent yet, so it uses the cached switch) ---- */
html.lhq-fluent2 .p4w-login-welcome h2 {
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .p4w-subtitle {
  color: var(--lhq-neutral-600);
}

html.lhq-fluent2 .p4w-form-group label,
html.lhq-fluent2 .p4w-remember-me label {
  color: var(--lhq-neutral-700);
}

html.lhq-fluent2 .p4w-input {
  background-color: var(--lhq-neutral-0);
  border: 1px solid var(--lhq-neutral-300);
  border-bottom-color: var(--lhq-neutral-500);
  border-radius: var(--lhq-radius-s);
  color: var(--lhq-neutral-900);
}

html.lhq-fluent2 .p4w-input:focus {
  background-color: var(--lhq-neutral-0);
  border-color: var(--lhq-neutral-300);
  border-bottom-color: var(--lhq-brand);
  box-shadow: inset 0 -1px 0 var(--lhq-brand);
}

html.lhq-fluent2 .p4w-remember-me input[type="checkbox"] {
  accent-color: var(--lhq-brand);
}

html.lhq-fluent2 .p4w-signin-btn {
  background: var(--lhq-brand);
  border-radius: var(--lhq-radius-s);
  font-weight: 600;
}

html.lhq-fluent2 .p4w-signin-btn:hover {
  background: var(--lhq-brand-hover);
}

html.lhq-fluent2 .p4w-signin-btn:active {
  background: var(--lhq-brand-pressed);
}

html.lhq-fluent2 .p4w-signin-btn:focus-visible {
  box-shadow: var(--lhq-focus-ring);
  outline: none;
}

/* The right-hand branding panel keeps the light gradient from Login.html. The logo's blue wordmark and grey tagline
   vanish on a brand-blue panel, so the Sign In button carries the brand instead. skin-css.test.mjs guards this. */

/* ---- Tokens only: tools rebuilt in Phase 5 get the font and a brand accent, nothing structural ---- */
html.lhq-fluent2 .fc,
html.lhq-fluent2 .grid-stack-item-content,
html.lhq-fluent2 .query-builder,
html.lhq-fluent2 .note-editor,
html.lhq-fluent2 .vis-network {
  font-family: var(--lhq-font);
}

html.lhq-fluent2 .fc-unthemed td.fc-today {
  background-color: var(--lhq-brand-tint);
}