/*
 * iGlow theme — Glow Connection's own layout + theme layer (replaces the Serenity Pro theme).
 *
 * Loads after Bootstrap 5 and ~/Serenity.Extensions/common-theme.css (both MIT), before
 * custom-themes.css and site.css. It provides:
 *   1. design tokens for the built-in themes (azure-light = default, cosmos-dark, glassy-light)
 *      and a dark baseline every *-dark theme inherits from
 *   2. the sidebar layout: icon band + menu pane, collapsed pane, mobile header / slide-in sidebar
 *   3. small component adjustments on top of common-theme so grids, dialogs and forms keep the look
 *      users are used to
 *
 * Theme switching: <html class="theme-{slug}" data-bs-theme="light|dark"> is rendered by
 * Views/Shared/_Layout.cshtml from the ProThemeSelection cookie and swapped by iglow-theme.js.
 * Custom themes (custom-themes.css) only override the tokens below.
 */

/* ===== 1. Tokens ===================================================================== */

:root {
  --s-sidebar-band-width: 4rem;
  --s-sidebar-pane-width: 19rem;
  --s-mobile-header-height: 48px;
  --s-icon-font: "Font Awesome 5 Free";
  --s-icon-solid: 900;
  --bs-body-font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --bs-body-font-size: 14px;
}

/* azure-light: the default theme (also used when no theme cookie exists) */
:root,
:root.theme-azure-light {
  --bs-body-bg: #f6fafc;
  --bs-body-bg-rgb: 246, 250, 252;
  --bs-body-color: #000;
  --bs-body-color-rgb: 0, 0, 0;
  --bs-border-color: #d5dce0;
  --bs-link-color: #0f41c9;
  --s-alt-row-bg: rgba(139, 177, 205, 0.1);
  --s-bright-rgb: 11, 12, 15;
  --s-card-bg: #fff;
  --s-card-border: #e8e9ea;
  --s-card-shadow: 0 2px 4px 0 rgba(53, 65, 76, 0.03);
  --s-card-title: #005fb1;
  --s-category-title: #39a7b9;
  --s-deleted: #999;
  --s-disabled: #606570;
  --s-inactive: #999;
  --s-input-bg: #fff;
  --s-input-clear: #b33f32;
  --s-input-dirty-bg: #ffe0e0;
  --s-input-outline: rgba(38, 113, 203, 0.25);
  --s-input-outline-error: rgba(203, 48, 48, 0.25);
  --s-input-readonly-bg: #f3f3f3;
  --s-modal-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.1);
  --s-no-results: #9880bd;
  --s-placeholder: #777;
  --s-pager-icon: #5b3df1;
  --s-pager-text: #555;
  --s-scroll-thumb: #c9d0da;
  --s-scroll-thumb-hover: #c3cbd5;
  --s-scroll-track: #e2e8ee;
  --s-sidebar-band-bg: #005fb1;
  --s-sidebar-band-link: #bde8fd;
  --s-sidebar-band-link-active: #fff;
  --s-sidebar-icon: #0c6190;
  --s-sidebar-icon-active: #007eff;
  --s-sidebar-link: #2d3542;
  --s-sidebar-link-active: #007eff;
  --s-cell-border: rgba(53, 68, 78, 0.1);
  --s-cell-input-border: rgba(221, 221, 221, 0.5);
  --s-column-header: #4d5865;
  --s-column-header-hover-bg: #e4f0fb;
  --s-column-header-border: #f7f7f5;
  --s-column-footer: #3cacbf;
  --s-tabs-border: rgba(0, 0, 0, 0.1);
  --s-tabs-border-active: #3c78ff;
  --s-tabs-text: #7f8bb5;
  --s-tabs-text-active: #3c78ff;
  --s-tool-icon: #4a4a8e;
}

/* azure only: tinted grid header (custom light themes keep it transparent) */
:root.theme-azure-light {
  --s-column-header-bg: #f8f8f9;
}

/* dark baseline (= cosmos-dark): custom *-dark themes override what they need */
:root[data-bs-theme="dark"],
:root.theme-cosmos-dark {
  --bs-body-bg: #071222;
  --bs-body-bg-rgb: 7, 18, 34;
  --bs-body-color: #d0d6e3;
  --bs-body-color-rgb: 208, 214, 227;
  --bs-border-color: #354151;
  --bs-link-color: #accfff;
  --s-alt-row-bg: rgba(0, 0, 0, 0.1);
  --s-bright-rgb: 248, 249, 250;
  --s-card-bg: #0a182c;
  --s-card-border: #354151;
  --s-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --s-card-title: #e4e4e4;
  --s-category-title: #6f82c5;
  --s-disabled: #6c727f;
  --s-input-bg: #071222;
  --s-input-clear: #9c78c8;
  --s-input-dirty-bg: rgb(63, 17, 44);
  --s-input-readonly-bg: #0d1c32;
  --s-modal-shadow: 0 0 6px 3px rgba(98, 106, 136, 0.1);
  --s-placeholder: #536078;
  --s-pager-icon: #3fb7ff;
  --s-pager-text: #b2bbc9;
  --s-scroll-thumb: #5b6a7b;
  --s-scroll-thumb-hover: #7c90a5;
  --s-scroll-track: #2f3d4e;
  --s-sidebar-band-bg: #071b36;
  --s-sidebar-band-link: #616a9f;
  --s-sidebar-band-link-active: #e4e4e4;
  --s-sidebar-icon: #5c638d;
  --s-sidebar-icon-active: #50b6ff;
  --s-sidebar-link: #c7ccd3;
  --s-sidebar-link-active: #fff;
  --s-cell-border: rgba(180, 198, 239, 0.1);
  --s-cell-input-border: rgba(55, 65, 104, 0.4);
  --s-column-header: #8693c2;
  --s-column-header-hover-bg: rgba(68, 129, 239, 0.05);
  --s-column-header-bg: transparent;
  --s-column-header-border: rgb(52, 60, 102);
  --s-frozen-border: var(--bs-gray-800);
  --s-column-footer: #7ec6cd;
  --s-tabs-border: #6eb5ff20;
  --s-tabs-border-active: #6eb5ff;
  --s-tabs-text: #7f8bb5;
  --s-tabs-text-active: #6eb5ff;
  --s-tool-icon: #8075af;
}

/* cosmos keeps slightly dimmer input text than its body text */
:root.theme-cosmos-dark {
  --s-input-color: #c8cfdf;
}

:root.theme-cosmos-dark .text-purple {
  color: #836ba8 !important;
}

/* glassy-light: translucent panes over a soft background */
:root.theme-glassy-light {
  --bs-body-bg: #f4fbf8;
  --bs-body-bg-rgb: 244, 251, 248;
  --bs-border-color: #dee2e6;
  --bs-link-color: #0e3293;
  --s-alt-row-bg: rgba(139, 205, 177, 0.1);
  --s-bright-rgb: 11, 15, 12;
  --s-card-bg: rgba(255, 255, 255, 0.25);
  --s-card-border: #e8eae9;
  --s-card-shadow: 0 2px 4px 0 rgba(53, 76, 65, 0.03);
  --s-card-title: #003478;
  --s-category-title: #039989;
  --s-input-bg: rgba(255, 255, 255, 0.7);
  --s-pager-icon: #4f5e06;
  --s-sidebar-band-bg: rgba(0, 0, 0, 0.4);
  --s-sidebar-band-link: #cdeddd;
  --s-sidebar-icon: #25400d;
  --s-sidebar-icon-active: #278d00;
  --s-sidebar-link: #080809;
  --s-sidebar-link-active: #278d00;
  --s-sidebar-pane-bg: rgba(255, 255, 255, 0.8);
  --s-column-header: #306a4e;
  --s-column-header-hover-bg: rgba(68, 129, 239, 0.05);
  --s-column-header-border: #ebeff2;
  --s-tabs-border-active: #107e39;
  --s-tabs-text: #669281;
  --s-tabs-text-active: #066624;
}

/* ===== 2. Base ======================================================================= */

html {
  font-size: var(--bs-body-font-size);
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

#PageBackground {
  display: none;
}

/* glassy: our own soft gradient backdrop (fixed, behind everything) */
:root.theme-glassy-light #PageBackground {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -10000;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(158, 214, 190, 0.55) 0, transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(176, 205, 232, 0.5) 0, transparent 40%),
    radial-gradient(circle at 70% 85%, rgba(196, 228, 207, 0.6) 0, transparent 45%),
    linear-gradient(135deg, #eef7f3 0%, #f7fbf9 50%, #e9f3f0 100%);
}

/* glassy: page-level grids and panel dialogs sit on a frosted panel */
:root.theme-glassy-light .s-main > section.content > .route-handler.s-DataGrid,
:root.theme-glassy-light .s-main > section.content > .s-Panel {
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.8);
}

:root.theme-glassy-light .modal-content {
  background-color: #fbfdfc;
}

/* ===== 3. Sidebar: band + pane ======================================================= */

.s-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 11;
  display: flex;
  width: calc(var(--s-sidebar-band-width) + var(--s-sidebar-pane-width));
  transform: translateX(0);
  box-shadow: 1px 0 6px 0 rgba(54, 74, 99, 0.12);
  transition: width 0.2s ease, transform 0.2s ease;
}

.s-sidebar-band {
  z-index: 12;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--s-sidebar-band-width);
  width: var(--s-sidebar-band-width);
  padding-top: 6px;
  background-color: var(--s-sidebar-band-bg);
  border-right: 1px solid var(--s-card-border);
}

.s-sidebar-band-groups,
.s-sidebar-band-actions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.s-sidebar-band-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.85em;
  padding: 0;
  color: var(--s-sidebar-band-link);
  font-size: 2.285rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.s-sidebar-band-link:hover,
.s-sidebar-band-link:focus,
.s-sidebar-band-groups > li.active > .s-sidebar-band-link,
.s-sidebar-band-actions .show > .s-sidebar-band-link {
  color: var(--s-sidebar-band-link-active);
}

.s-sidebar-band-groups > li.active > .s-sidebar-band-link {
  font-weight: 500;
}

.s-sidebar-band-icon {
  display: block;
  line-height: 1;
}

.s-sidebar-band-middle {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

/* logo / title written bottom-to-top along the band */
.s-sidebar-band-branding {
  position: absolute;
  top: calc(100% - 1.5rem);
  left: 0;
  display: flex;
  align-items: center;
  height: var(--s-sidebar-band-width);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}

.s-sidebar-band-logo {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
}

.s-sidebar-pane {
  position: absolute;
  top: 0;
  left: var(--s-sidebar-band-width);
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: var(--s-sidebar-pane-width);
  background: var(--s-sidebar-pane-bg, var(--s-card-bg));
  border-right: 0;
  font-size: 1rem;
  transition: left 0.2s ease;
}

.s-sidebar-search {
  position: relative;
  flex: 0 0 auto;
}

.s-sidebar-search-icon {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  font-size: 1.375rem;
  line-height: 1;
}

.s-sidebar-search-input {
  display: inline-block;
  padding: 0.375rem 0.75rem 0.375rem 2.3rem;
  background-color: var(--s-input-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  line-height: 1.5;
}

.s-sidebar-search-input:focus {
  outline: none;
  border-color: rgba(var(--bs-primary-rgb), 0.5);
  box-shadow: 0 0 0 0.2rem var(--s-input-outline);
}

.s-sidebar-groups {
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-width: thin;
}

/* only the group picked on the band is shown (search shows every match) */
.s-sidebar-group {
  display: none;
}

.s-sidebar-group.active,
.s-sidebar-group.is-match {
  display: block;
}

.s-sidebar-group-title {
  margin: 0 1rem 0.9rem;
  color: var(--s-card-title);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.s-sidebar-menu,
.s-sidebar-section-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.s-sidebar-section {
  margin-bottom: 1.5rem;
}

.s-sidebar-section-title {
  margin: 1.5rem 1rem 5px;
  color: var(--s-category-title);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.s-sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem 0.375rem 1rem;
  color: var(--s-sidebar-link);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: none;
}

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

.s-sidebar-icon {
  display: flex;
  justify-content: center;
  flex: 0 0 1.5rem;
  margin-right: 0.5rem;
  color: var(--s-sidebar-icon);
  font-size: 1.5rem;
  line-height: 1;
}

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

.s-sidebar-link-text {
  display: flex;
  align-items: normal;
  flex-grow: 1;
}

.s-sidebar-menu-toggle {
  flex: 0 0 1em;
  text-align: center;
  transition: transform 0.15s ease;
  transform-origin: 0.5em 50%;
}

[aria-expanded="true"] > .s-sidebar-menu-toggle {
  transform: rotate(90deg);
}

.s-sidebar-menu .s-sidebar-menu {
  margin-left: 1em;
}

.s-sidebar-menu .s-sidebar-menu .s-sidebar-link {
  font-size: 1rem;
  font-weight: 400;
}

/* pane collapsed with the band toggle (cookie SidebarPaneCollapsed=1 → body class) */
.s-sidebar-pane-collapsed .s-sidebar {
  width: var(--s-sidebar-band-width);
}

.s-sidebar-pane-collapsed .s-sidebar-pane {
  left: calc(var(--s-sidebar-band-width) - var(--s-sidebar-pane-width));
}

.s-sidebar-pane-toggle {
  transition: transform 0.2s ease;
}

.s-sidebar-pane-collapsed .s-sidebar-pane-toggle {
  transform: rotate(180deg);
}

/* auto hide: while collapsed, hovering / focusing the sidebar slides the pane out OVER the page
   (body.s-sidebar-pane-peek, set by iglow-theme.js) — .s-main keeps its narrow padding */
.s-sidebar-pane-collapsed.s-sidebar-pane-peek .s-sidebar {
  width: calc(var(--s-sidebar-band-width) + var(--s-sidebar-pane-width));
  box-shadow: 6px 0 24px -6px rgba(15, 30, 55, 0.28);
}

.s-sidebar-pane-collapsed.s-sidebar-pane-peek .s-sidebar-pane {
  left: var(--s-sidebar-band-width);
}

@media (prefers-reduced-motion: reduce) {
  .s-sidebar,
  .s-sidebar-pane,
  .s-main {
    transition: none;
  }
}

/* ===== 4. Main area ================================================================== */

.s-main {
  padding-left: calc(var(--s-sidebar-band-width) + var(--s-sidebar-pane-width));
  transition: padding-left 0.2s ease;
}

.s-sidebar-pane-collapsed .s-main {
  padding-left: var(--s-sidebar-band-width);
}

.s-main > section.content {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}

.no-navigation .s-main,
.no-navigation .s-main > section.content {
  padding-left: 0;
}

/* ===== 5. Mobile header + slide-in sidebar ========================================== */

.s-mobile-header {
  display: none;
}

@media (max-width: 1199.98px) {
  .s-mobile-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    height: var(--s-mobile-header-height);
    padding: 7px 0;
    background-color: var(--s-sidebar-band-bg);
  }

  .s-sidebar-toggler {
    width: var(--s-sidebar-band-width);
    padding: 1px 6px;
    color: var(--s-sidebar-band-link-active);
    font-size: 32px;
    line-height: 32px;
    background: none;
    border: 0;
    visibility: visible;
  }

  .s-sidebar-toggler:focus,
  .s-sidebar-toggler:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .s-mobile-header-branding {
    display: block;
  }

  .s-mobile-header-logo {
    width: 28px;
    height: 28px;
  }

  .s-mobile-header-actions {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
  }

  .s-mobile-header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin-right: 1.5rem;
    color: var(--s-sidebar-band-link);
    font-size: 2.285rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
  }

  .s-mobile-header-link:hover,
  .show > .s-mobile-header-link {
    color: var(--s-sidebar-band-link-active);
  }

  .s-mobile-header-icon {
    display: block;
    line-height: 1;
  }

  .s-sidebar {
    top: var(--s-mobile-header-height);
    transform: translateX(-100%);
  }

  .s-sidebar-expanded .s-sidebar {
    transform: translateX(0);
  }

  /* collapsing the pane is a desktop feature; on small screens the whole sidebar slides */
  .s-sidebar-pane-collapsed .s-sidebar {
    width: calc(var(--s-sidebar-band-width) + var(--s-sidebar-pane-width));
  }

  .s-sidebar-pane-collapsed .s-sidebar-pane {
    left: var(--s-sidebar-band-width);
  }

  .s-sidebar-pane-toggle {
    display: none;
  }

  .s-main,
  .s-sidebar-pane-collapsed .s-main {
    padding-left: 0;
  }
}

/* ===== 6. Dropdowns from the band ==================================================== */

.s-sidebar-band .dropdown-menu {
  z-index: 1050;
}

.s-user-profile-menu {
  min-width: 14rem;
}

.s-user-profile-menu .dropdown-item .icon {
  width: 1.25rem;
  text-align: center;
}

/* ===== 7. Inputs ===================================================================== */

input,
textarea,
select,
.form-control,
.form-select,
.select2-container .select2-choice,
.s-QuickSearchBar .quick-search-icon {
  /* no fallback on purpose: light themes leave it unset so inputs inherit the text colour around them */
  color: var(--s-input-color);
}

/* select2 "clear" cross */
.select2-container .select2-search-choice-close,
.select2-container .select2-search-choice-close::after {
  color: var(--s-input-clear);
}

/* ===== 8. Dialogs / forms ============================================================ */

.panel-titlebar,
.panel-titlebar-text {
  color: var(--s-card-title);
}

.category-title {
  color: var(--s-category-title);
}

/* small modals (column picker, prompts) use a compact header */
.modal-sm .modal-header {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.modal-sm .modal-title {
  font-size: 1.15rem;
  line-height: 1.5;
}

/* grid editors and upload boxes inside forms sit on a card */
.field > .editor.s-DataGrid,
.field > .editor.s-MultipleImageUploadEditor,
.field > .editor.s-ImageUploadEditor {
  box-shadow: var(--s-card-shadow);
}

/* ===== 9. Grid ======================================================================= */

.grid-title,
.grid-title .title-text {
  color: var(--s-card-title);
}

.tool-group > .tool-button:first-child > .button-inner {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.tool-group > .tool-button:last-child > .button-inner {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.slick-header {
  background-color: var(--s-column-header-bg, transparent);
  border-top: 1px solid var(--s-column-header-border);
  border-bottom: 1px solid var(--s-column-header-border);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.slick-header-column.slick-header-sortable {
  cursor: default;
}

.slick-resizable-handle {
  right: -5px;
  width: 9px;
}

.slick-resizable-handle::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  width: 2px;
  height: 16px;
  font-size: 0.1px;
}

.slick-header-column:hover > .slick-resizable-handle::after {
  background-color: currentColor;
  opacity: 0.3;
}

.slick-viewport.sg-start.sg-body {
  border-right: 1.5px solid var(--s-frozen-border, var(--bs-gray-500));
}

/* grouping bar (shown by GlowGroupingPanel when columns are grouped) */
.slick-grouping-panel {
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}

.slick-grouping-panel::before {
  content: "\f550";
  display: block;
  width: 1.5rem;
  margin-right: 2px;
  font-family: var(--s-icon-font);
  font-weight: var(--s-icon-solid);
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}

/* toolbars made of plain .btn.tool-button elements read as one button group */
.btn.tool-button:has(+ .btn.tool-button) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn.tool-button + .btn.tool-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* footer totals: Σ marks a sum, empty cells keep their height */
.slick-footerrow-column .aggregate.agg-sum::before {
  content: "\03A3";
  display: inline-block;
  margin-right: 0.25rem;
  color: var(--bs-primary);
  font-family: var(--s-tabular-font);
  font-size: calc(1em * 5 / 6);
  line-height: 1;
}

.slick-footerrow-column .aggregate-disabled,
.slick-footerrow-column .aggregate-none {
  display: inline-block;
  width: 100%;
  min-height: 23px;
}

/* full-height pages (grids) fill the viewport; below 1200px the mobile header takes its share */
@media (min-width: 768px) {
  .full-height-page section.content {
    height: calc(100vh - var(--s-mobile-header-height));
  }
}

@media (min-width: 1200px) {
  .full-height-page section.content {
    height: 100vh;
  }
}