/* ==========================================================================
   SUN Liner Portal - the shell.

   Header, blue sub-bar, menu, content area and footer - the same frame as the
   legacy master page (see sun_blazor_ref_files/landingscreen.png), in the
   blue and orange palette. Every colour is a theme.css token.

   The shell fills the window and never scrolls itself. The menu and the
   content area scroll independently, so the header, the "Logged in as" bar
   and the footer stay on screen - exactly as the legacy fixed panels did.
   ========================================================================== */

.sl-shell {
  display: grid;
  grid-template-areas:
    "header header"
    "subbar subbar"
    "side   main"
    "footer footer";
  grid-template-columns: var(--sl-sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--sl-header-height) var(--sl-subbar-height) minmax(0, 1fr) var(--sl-footer-height);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transition: grid-template-columns 200ms ease;
}

.sl-shell.is-menu-toggled {
  grid-template-columns: 0 minmax(0, 1fr);
}

/* ---- Header ------------------------------------------------------------ */

.sl-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px 0 10px;
  border-bottom: 3px solid var(--sl-orange-500);
  background: var(--sl-header);
  z-index: 3;
}

.sl-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.sl-brand__logo {
  width: 104px;
  height: 47px;
  object-fit: contain;
}

/* The mark is dark blue and dark red: on the dark header it needs a light plate. */
[data-theme="dark"] .sl-brand__logo {
  padding: 3px 6px;
  border-radius: var(--sl-radius-sm);
  background: #FFFFFF;
}

.sl-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.sl-brand__title {
  color: var(--sl-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sl-brand__sub {
  color: var(--sl-ink-subtle);
  font-size: 12px;
  white-space: nowrap;
}

.sl-header__spacer {
  flex: 1 1 auto;
}

.sl-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Round header buttons, the shape the legacy header uses for its bell, home
   and sign-out icons - here as DevExpress buttons with our icon set. */
.sl-round.dxbl-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid var(--sl-line);
  border-radius: 50%;
  background: var(--sl-surface);
  color: var(--sl-blue-600);
  font-size: 18px;
  transition: background-color var(--sl-transition), color var(--sl-transition), border-color var(--sl-transition), transform 80ms ease;
}

.sl-round.dxbl-btn:not(:disabled):hover {
  border-color: var(--sl-orange-300);
  background: var(--sl-orange-050);
  color: var(--sl-orange-600);
}

.sl-round.dxbl-btn:not(:disabled):active {
  transform: translateY(1px);
}

.sl-round--signout.dxbl-btn:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--sl-stop) 35%, transparent);
  background: var(--sl-stop-soft);
  color: var(--sl-stop);
}

.sl-round .dxbl-btn-caption {
  display: none;
}

/* The user chip: initials, name, agent. Opens the profile flyout. */
.sl-user-chip.dxbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 3px 14px 3px 4px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-surface);
  color: var(--sl-ink);
  font-weight: 600;
}

.sl-user-chip.dxbl-btn:hover {
  border-color: var(--sl-blue-300);
  background: var(--sl-blue-050);
}

.sl-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sl-orange-400), var(--sl-orange-600));
  color: var(--sl-ink-on-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sl-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

.sl-user-chip__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.sl-user-chip__name {
  font-size: 13px;
}

.sl-user-chip__agent {
  color: var(--sl-ink-subtle);
  font-size: 11px;
  font-weight: 500;
}

/* ---- Sub-bar: "Logged in as", where the user is, the clock ------------- */

.sl-subbar {
  grid-area: subbar;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--sl-subbar);
  color: var(--sl-subbar-ink);
  font-size: 12px;
  z-index: 2;
}

.sl-subbar__who {
  font-weight: 600;
  white-space: nowrap;
}

.sl-subbar__path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.92;
}

.sl-subbar__clock {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.9;
}

/* ---- Menu -------------------------------------------------------------- */

.sl-sidebar {
  grid-area: side;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-inline-end: 1px solid var(--sl-line);
  background: var(--sl-sidebar);
}

.sl-sidebar__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 6px;
  color: var(--sl-ink-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sl-sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.sl-sidebar__empty {
  margin: 14px;
  color: var(--sl-ink-subtle);
  font-size: 13px;
}

/* The DevExpress accordion, dressed for the sidebar: transparent, no outer
   border, and the selected screen marked with the orange bar. */
.sl-menu.dxbl-accordion {
  border: 0;
  background: transparent;
}

.sl-menu .dxbl-accordion-item {
  border: 0;
  background: transparent;
}

.sl-menu .dxbl-accordion-item-header,
.sl-menu .dxbl-accordion-item-content .dxbl-accordion-item-header {
  border-radius: var(--sl-radius-sm);
}

.sl-menu .sl-menu__root > .dxbl-accordion-item-header {
  margin-top: 4px;
  color: var(--sl-heading);
  font-weight: 700;
}

.sl-menu .sl-menu__screen.is-current > .dxbl-accordion-item-header {
  box-shadow: inset 3px 0 0 var(--sl-orange-500);
  background: var(--sl-orange-050);
  color: var(--sl-orange-700);
  font-weight: 600;
}

.sl-menu .sl-menu__soon > .dxbl-accordion-item-header {
  color: var(--sl-ink-subtle);
  font-style: italic;
  cursor: default;
}

.sl-menu .sl-i {
  color: var(--sl-blue-500);
}

.sl-menu .sl-menu__root > .dxbl-accordion-item-header .sl-i {
  color: var(--sl-orange-500);
}

/* ---- Content ----------------------------------------------------------- */

.sl-main {
  grid-area: main;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

/* A legacy screen fills the content area; the frame scrolls, not the shell. */
.sl-main.is-framed {
  overflow: hidden;
}

/* ---- Footer ------------------------------------------------------------ */

.sl-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-top: 2px solid var(--sl-orange-500);
  background: var(--sl-surface-sunken);
  color: var(--sl-ink-subtle);
  font-size: 11.5px;
  white-space: nowrap;
}

/* ---- Profile flyout ---------------------------------------------------- */

.sl-profile {
  width: 300px;
  padding: 4px 2px 2px;
}

.sl-profile__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 12px;
  border-bottom: 1px solid var(--sl-line-soft);
}

.sl-profile__name {
  margin: 0;
  color: var(--sl-heading);
  font-size: 15px;
  font-weight: 700;
}

.sl-profile__mail {
  margin: 2px 0 0;
  color: var(--sl-ink-subtle);
  font-size: 12px;
  word-break: break-all;
}

.sl-profile__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 12px 6px;
  font-size: 12.5px;
}

.sl-profile__facts dt {
  color: var(--sl-ink-subtle);
}

.sl-profile__facts dd {
  margin: 0;
  color: var(--sl-ink);
  font-weight: 600;
}

.sl-profile__actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 10px 6px 4px;
  border-top: 1px solid var(--sl-line-soft);
}

/* ---- Legacy screen host ------------------------------------------------ */

.sl-frame-host {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.sl-frame-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--sl-line);
  background: var(--sl-surface);
}

.sl-frame-bar__title {
  margin: 0;
  color: var(--sl-heading);
  font-size: 16px;
  font-weight: 700;
}

.sl-frame-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #FFFFFF;          /* the legacy pages are light-only */
}

.sl-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  visibility: hidden;
}

.sl-frame.is-shown {
  visibility: visible;
}

.sl-frame-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  background: var(--sl-surface);
  color: var(--sl-ink-muted);
  font-size: 13px;
}

/* portal.js hides the loader with the hidden ATTRIBUTE once the frame has
   loaded. The display:grid above would otherwise beat the browser's own
   [hidden] rule, and the loader would sit over a loaded screen for ever -
   which is exactly what happened on 29 Sep 2026. */
.sl-frame-loader[hidden] {
  display: none;
}

.sl-frame-loader__bar {
  width: 240px;
  height: 4px;
  overflow: hidden;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-orange-050);
}

.sl-frame-loader__bar::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sl-orange-400), var(--sl-orange-600));
  animation: sl-slide 1.1s ease-in-out infinite;
}

@keyframes sl-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

/* ---- Landing ----------------------------------------------------------- */

.sl-landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  padding: 20px 22px 28px;
}

.sl-hero {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  padding: 24px 26px;
  border-radius: var(--sl-radius-lg);
  background: linear-gradient(120deg, var(--sl-blue-800) 0%, var(--sl-blue-600) 58%, var(--sl-blue-500) 100%);
  color: #FFFFFF;
  box-shadow: var(--sl-shadow-1);
}

/* The sun from the mark, rising behind the greeting. */
.sl-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(242 154 63 / 85%) 0%, rgb(224 118 27 / 45%) 45%, transparent 70%);
  pointer-events: none;
}

.sl-hero__title {
  position: relative;
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
}

.sl-hero__text {
  position: relative;
  margin: 0;
  max-width: 640px;
  opacity: 0.9;
}

.sl-hero__stats {
  position: relative;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.sl-stat {
  min-width: 130px;
  padding: 10px 14px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--sl-radius);
  background: rgb(255 255 255 / 10%);
}

.sl-stat__value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sl-stat__label {
  font-size: 12px;
  opacity: 0.85;
}

.sl-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--sl-heading);
  font-size: 15px;
  font-weight: 700;
}

.sl-section-title .sl-i {
  color: var(--sl-orange-500);
}

.sl-panel {
  padding: 16px 18px;
}

.sl-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.sl-module {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  background: var(--sl-surface);
  color: var(--sl-ink);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition), transform var(--sl-transition);
}

.sl-module:hover {
  border-color: var(--sl-orange-300);
  box-shadow: var(--sl-shadow-1);
  transform: translateY(-1px);
}

.sl-module:focus-visible {
  outline: 2px solid var(--sl-blue-500);
  outline-offset: 2px;
}

.sl-module__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--sl-radius);
  background: var(--sl-blue-050);
  color: var(--sl-blue-600);
  font-size: 18px;
}

.sl-module:hover .sl-module__icon {
  background: var(--sl-orange-050);
  color: var(--sl-orange-600);
}

.sl-module__name {
  display: block;
  font-weight: 700;
}

.sl-module__count {
  color: var(--sl-ink-subtle);
  font-size: 12px;
}

.sl-landing__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sl-calendar .dxbl-calendar {
  width: 100%;
}

/* ---- Module page: the screens under one menu heading ------------------- */

.sl-group {
  margin-bottom: 18px;
}

.sl-group__title {
  margin: 0 0 8px;
  color: var(--sl-ink-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sl-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

.sl-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sl-line-soft);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-surface);
  color: var(--sl-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--sl-transition), background-color var(--sl-transition);
}

.sl-link:hover {
  border-color: var(--sl-blue-300);
  background: var(--sl-blue-050);
}

.sl-link .sl-i {
  color: var(--sl-blue-500);
}

.sl-link.is-soon {
  color: var(--sl-ink-subtle);
  cursor: default;
}

/* ---- Narrow windows: the menu becomes a drawer over the content -------- */

@media (max-width: 900px) {
  .sl-shell,
  .sl-shell.is-menu-toggled {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .sl-sidebar {
    position: fixed;
    top: calc(var(--sl-header-height) + var(--sl-subbar-height));
    bottom: var(--sl-footer-height);
    left: 0;
    z-index: 20;
    width: min(86vw, var(--sl-sidebar-width));
    box-shadow: var(--sl-shadow-2);
    transform: translateX(-102%);
    transition: transform 200ms ease;
  }

  .sl-shell.is-menu-toggled .sl-sidebar {
    transform: none;
  }

  .sl-brand__text,
  .sl-user-chip__text,
  .sl-subbar__path {
    display: none;
  }

  .sl-landing {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-footer > :not(:first-child) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-shell,
  .sl-sidebar,
  .sl-module {
    transition: none;
  }

  .sl-frame-loader__bar::after {
    animation-duration: 3s;
  }
}