/* Layout themes.
   The document element carries theme-{id} from the ProThemeSelection cookie.
   Azure Light is the built-in look: these defaults match the colors hardcoded
   in Serenity's common-theme, so that theme does not change. Indus Blue and
   Graphite Fiori override the same variables. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
}

:root {
  --s-header-bg: #3c8dbc;
  --s-header-fg: #ffffff;
  --s-sidebar-bg: #ffffff;
  --s-sidebar-border: #e8e9ea;
  --s-sidebar-link: #2d3542;
  --s-sidebar-icon: #0c6190;
  --s-sidebar-link-hover: #007eff;
  --s-sidebar-link-active-bg: transparent;
  --s-sidebar-link-active-fg: #007eff;
  --s-sidebar-active-radius: 0;
  --s-sidebar-active-margin: 0;
  --s-chart-bar: #3c8dbc;
  --s-chart-bar-alt: #4dc9f6;
  --s-chart-accent: #f67019;
  --s-on-success: #ffffff;
  --s-on-warning: #1c2430;
  --s-on-danger: #ffffff;
  --s-status-success-bg: var(--bs-success);
  --s-status-warning-bg: var(--bs-warning);
  --s-status-danger-bg: var(--bs-danger);
}

/* Chrome that common-theme paints with literals, pointed at variables so a
   theme can recolor the shell without restyling each screen. */
.s-sidebar-header {
  background-color: var(--s-header-bg);
}

.s-sidebar-header-link,
.s-sidebar-header-title,
.s-sidebar-toggler {
  color: var(--s-header-fg);
}

.s-sidebar-pane {
  background: var(--s-sidebar-bg);
  border-right-color: var(--s-sidebar-border);
}

.s-sidebar-link {
  color: var(--s-sidebar-link);
}

.s-sidebar-icon {
  color: var(--s-sidebar-icon);
}

.s-sidebar-link:hover,
.s-sidebar-link:hover .s-sidebar-icon {
  color: var(--s-sidebar-link-hover);
}

.s-sidebar-pane .active > .s-sidebar-link {
  background: var(--s-sidebar-link-active-bg);
  color: var(--s-sidebar-link-active-fg);
  border-radius: var(--s-sidebar-active-radius);
  margin-inline: var(--s-sidebar-active-margin);
}

.s-sidebar-pane .active > .s-sidebar-link > .s-sidebar-icon {
  color: var(--s-sidebar-link-active-fg);
}

.s-theme-selection-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.s-theme-swatch {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
}

.s-theme-swatch-azure-light { background: #3c8dbc; }
.s-theme-swatch-indus-blue { background: #1f4e99; }
.s-theme-swatch-graphite-fiori { background: #354a5f; }

/* Shared bindings. Bootstrap 5.3 bakes button colors in, so the themed
   buttons read the palette variables instead. Status chips set their own
   text color: warning is always dark, and a couple of brand fills are too
   light for white text at small sizes. */
html.theme-indus-blue,
html.theme-graphite-fiori {
  --s-primary-hover: color-mix(in srgb, var(--bs-primary) 86%, black);
  --s-primary-active: color-mix(in srgb, var(--bs-primary) 74%, black);
  --s-card-bg: #ffffff;
  --s-input-bg: #ffffff;
  --s-input-text: var(--bs-body-color);
  --s-input-outline: rgba(var(--bs-primary-rgb), 0.28);
  --s-sidebar-band-bg: var(--bs-primary);
  --s-header-bg: var(--bs-primary);
  --s-header-fg: #ffffff;
  --s-sidebar-bg: #ffffff;
  --s-sidebar-link: var(--bs-body-color);
  --s-sidebar-icon: var(--bs-secondary);
  --s-sidebar-link-hover: var(--bs-primary);
  --s-sidebar-link-active-bg: var(--bs-primary);
  --s-sidebar-link-active-fg: #ffffff;
  --s-sidebar-active-radius: 8px;
  --s-sidebar-active-margin: 4px;
  --s-category-title: var(--bs-primary);
  --s-column-header: var(--bs-secondary);
  --s-tabs-text-active: var(--bs-primary);
  --s-tabs-border-active: var(--bs-primary);
  --s-tool-icon: var(--bs-secondary);
  --s-pager-icon: var(--bs-primary);
  --s-alt-row-bg: rgba(var(--bs-primary-rgb), 0.06);
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--s-primary-hover);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-active-color: #ffffff;
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 14%, white);
  --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 32%, white);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 72%, black);
  --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 16%, white);
  --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 22%, white);
  --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 14%, white);
  --bs-emphasis-color: var(--bs-body-color);
  --bs-heading-color: var(--bs-body-color);
  color-scheme: light;
}

html.theme-indus-blue .btn-primary,
html.theme-graphite-fiori .btn-primary,
html.theme-indus-blue .btn-outline-primary,
html.theme-graphite-fiori .btn-outline-primary,
html.theme-indus-blue .btn-success,
html.theme-graphite-fiori .btn-success,
html.theme-indus-blue .btn-warning,
html.theme-graphite-fiori .btn-warning,
html.theme-indus-blue .btn-danger,
html.theme-graphite-fiori .btn-danger {
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
}

html.theme-indus-blue .btn-primary,
html.theme-graphite-fiori .btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--s-primary-hover);
  --bs-btn-hover-border-color: var(--s-primary-hover);
  --bs-btn-active-bg: var(--s-primary-active);
  --bs-btn-active-border-color: var(--s-primary-active);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

html.theme-indus-blue .btn-outline-primary,
html.theme-graphite-fiori .btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--s-primary-active);
  --bs-btn-active-border-color: var(--s-primary-active);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

html.theme-indus-blue .btn-success,
html.theme-graphite-fiori .btn-success {
  --bs-btn-color: var(--s-on-success);
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 86%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 86%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 74%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 74%, black);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

html.theme-indus-blue .btn-warning,
html.theme-graphite-fiori .btn-warning {
  --bs-btn-color: var(--s-on-warning);
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 76%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 76%, black);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

html.theme-indus-blue .btn-danger,
html.theme-graphite-fiori .btn-danger {
  --bs-btn-color: var(--s-on-danger);
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 86%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 86%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 74%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 74%, black);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

html.theme-indus-blue .badge.bg-success,
html.theme-indus-blue .text-bg-success,
html.theme-graphite-fiori .badge.bg-success,
html.theme-graphite-fiori .text-bg-success {
  background-color: var(--s-status-success-bg) !important;
  color: var(--s-on-success) !important;
}

html.theme-indus-blue .badge.bg-warning,
html.theme-indus-blue .text-bg-warning,
html.theme-graphite-fiori .badge.bg-warning,
html.theme-graphite-fiori .text-bg-warning {
  background-color: var(--s-status-warning-bg) !important;
  color: var(--s-on-warning) !important;
}

html.theme-indus-blue .badge.bg-danger,
html.theme-indus-blue .text-bg-danger,
html.theme-graphite-fiori .badge.bg-danger,
html.theme-graphite-fiori .text-bg-danger,
html.theme-indus-blue .posted-badge,
html.theme-graphite-fiori .posted-badge {
  background-color: var(--s-status-danger-bg) !important;
  color: var(--s-on-danger) !important;
}

/* Indus Blue — light, for everyday back-office work. */
html.theme-indus-blue {
  --bs-primary: #1f4e99;
  --bs-primary-rgb: 31, 78, 153;
  --bs-secondary: #3b6fc4;
  --bs-secondary-rgb: 59, 111, 196;
  --bs-success: #1e9e5a;
  --bs-success-rgb: 30, 158, 90;
  --bs-warning: #e8a317;
  --bs-warning-rgb: 232, 163, 23;
  --bs-danger: #d64545;
  --bs-danger-rgb: 214, 69, 69;
  --s-accent: #f2a900;
  --s-accent-rgb: 242, 169, 0;
  --bs-body-bg: #f5f7fa;
  --bs-body-bg-rgb: 245, 247, 250;
  --bs-body-color: #1c2430;
  --bs-body-color-rgb: 28, 36, 48;
  --bs-secondary-color: rgba(28, 36, 48, 0.72);
  --bs-tertiary-color: rgba(28, 36, 48, 0.52);
  --bs-border-color: #d5dde8;
  --bs-body-font-family: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --s-tabular-font: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --s-chart-bar: #1f4e99;
  --s-chart-bar-alt: #3b6fc4;
  --s-chart-accent: #f2a900;
  /* White on #1E9E5A is 3.45:1. Dark text clears 4.5:1 on the brand green. */
  --s-on-success: #1c2430;
  --s-on-warning: #1c2430;
  --s-on-danger: #ffffff;
  --s-status-success-bg: #1e9e5a;
  --s-status-warning-bg: #e8a317;
  /* White on #D64545 is 4.38:1. This fill is the same red, deepened so a small chip clears 4.5:1. */
  --s-status-danger-bg: #c93f3f;
}

/* Graphite Fiori — neutral, SAP-like, for data-heavy grids. */
html.theme-graphite-fiori {
  --bs-primary: #354a5f;
  --bs-primary-rgb: 53, 74, 95;
  --bs-secondary: #5b738b;
  --bs-secondary-rgb: 91, 115, 139;
  --bs-success: #256f3a;
  --bs-success-rgb: 37, 111, 58;
  --bs-warning: #e9730c;
  --bs-warning-rgb: 233, 115, 12;
  --bs-danger: #bb0000;
  --bs-danger-rgb: 187, 0, 0;
  --s-accent: #0a6ed1;
  --s-accent-rgb: 10, 110, 209;
  --bs-body-bg: #eef1f4;
  --bs-body-bg-rgb: 238, 241, 244;
  --bs-body-color: #223548;
  --bs-body-color-rgb: 34, 53, 72;
  --bs-secondary-color: rgba(34, 53, 72, 0.72);
  --bs-tertiary-color: rgba(34, 53, 72, 0.52);
  --bs-border-color: #d5dde3;
  --bs-link-color: #0a6ed1;
  --bs-link-hover-color: #0858a8;
  --bs-link-color-rgb: 10, 110, 209;
  --bs-body-font-family: "Source Sans 3", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --s-tabular-font: "Source Sans 3", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --s-chart-bar: #354a5f;
  --s-chart-bar-alt: #5b738b;
  --s-chart-accent: #0a6ed1;
  --s-on-success: #ffffff;
  --s-on-warning: #1c2430;
  --s-on-danger: #ffffff;
  --s-status-success-bg: #256f3a;
  --s-status-warning-bg: #e9730c;
  --s-status-danger-bg: #bb0000;
  --s-tabs-text-active: #0a6ed1;
  --s-tabs-border-active: #0a6ed1;
}