/* ================================================================
   CHEK ACCOUNTING — UNIFIED DESIGN SYSTEM
   Visual identity derived from the Chek Accounting logo:
     · Primary hue:   #47BED9  (sky-blue cerulean from the mark)
     · Form language: geometric precision, clean radii
     · Type:          Montserrat — wide-tracked, purposeful weight
   ================================================================ */

/* Re-declare Radzen's "Material Symbols" icon font with font-display:block. Radzen ships it with no
   font-display (defaults to auto/swap), so on the first uncached load the browser paints each icon's
   ligature text (e.g. "groups", "pending_actions") in a fallback font until the woff2 arrives. block
   keeps the glyph invisible during the short load window instead — paired with the <link rel=preload>
   in App.razor the font is already in flight, so the blank window is negligible. This stylesheet loads
   after the Radzen theme, so this declaration wins; the src resolves to the same file the preload
   primes, so it is a single download. */
@font-face {
  font-family: "Material Symbols";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"),
       url("/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations");
}

/* ----------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ---------------------------------------------------------------- */
:root {
  /* Brand blues — extracted directly from logo mark */
  --ck-blue:           #47BED9;
  --ck-blue-hover:     #2DADC9;
  --ck-blue-active:    #1A90AB;
  --ck-blue-light:     #79D3E8;
  --ck-blue-ghost:     #EBF8FC;
  --ck-blue-border:    #C4E8F4;

  /* Sidebar — deep navy derived from the logo's blue, darkened */
  --ck-sidebar-top:    #0B2736;
  --ck-sidebar-mid:    #0E3347;
  --ck-sidebar-bot:    #104258;

  /* Surfaces */
  --ck-page-bg:        #F2F6F9;
  --ck-surface:        #FFFFFF;
  --ck-surface-subtle: #F8FBFD;

  /* Borders */
  --ck-border:         #DDE8EE;
  --ck-border-strong:  #B8D2DC;

  /* Typography */
  --ck-text:           #0F2535;
  --ck-text-secondary: #4A6475;
  --ck-text-muted:     #8BA8B6;
  --ck-text-inverse:   #FFFFFF;

  /* Semantic */
  --ck-success:        #27AE60;
  --ck-success-light:  #EAFAF1;
  --ck-warning:        #E67E22;
  --ck-warning-light:  #FEF5EC;
  --ck-danger:         #E74C3C;
  --ck-danger-light:   #FDECEA;
  --ck-info:           var(--ck-blue);
  --ck-info-light:     var(--ck-blue-ghost);

  /* Shape */
  --ck-radius-xs:      4px;
  --ck-radius-sm:      6px;
  --ck-radius-md:      10px;
  --ck-radius-lg:      16px;
  --ck-radius-xl:      24px;

  /* Elevation */
  --ck-shadow-xs:      0 1px 3px rgba(11, 39, 54, 0.06);
  --ck-shadow-sm:      0 2px 8px rgba(11, 39, 54, 0.08);
  --ck-shadow-md:      0 4px 16px rgba(11, 39, 54, 0.10);
  --ck-shadow-lg:      0 8px 32px rgba(11, 39, 54, 0.14);
  --ck-shadow-xl:      0 16px 48px rgba(11, 39, 54, 0.18);

  /* Transitions */
  --ck-transition:     150ms ease;
  --ck-transition-md:  250ms ease;

  /* Bootstrap 5 token overrides */
  --bs-primary:           var(--ck-blue);
  --bs-primary-rgb:       71, 190, 217;
  --bs-body-font-family:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-color:        var(--ck-text);
  --bs-body-bg:           var(--ck-page-bg);
  --bs-border-color:      var(--ck-border);
  --bs-border-radius:     var(--ck-radius-md);
  --bs-border-radius-sm:  var(--ck-radius-sm);
  --bs-border-radius-lg:  var(--ck-radius-lg);
  --bs-link-color:        var(--ck-blue);
  --bs-link-hover-color:  var(--ck-blue-hover);

  /* Radzen theme token overrides */
  --rz-primary:                    var(--ck-blue);
  --rz-primary-light:              var(--ck-blue-light);
  --rz-primary-lighter:            var(--ck-blue-ghost);
  --rz-primary-dark:               var(--ck-blue-hover);
  --rz-primary-darker:             var(--ck-blue-active);
  --rz-text-color:                 var(--ck-text);
  --rz-text-secondary-color:       var(--ck-text-secondary);
  --rz-text-disabled-color:        var(--ck-text-muted);
  --rz-base-background-color:      var(--ck-surface);
  --rz-secondary-background-color: var(--ck-page-bg);
  --rz-border-color:               var(--ck-border);
  --rz-border-radius:              var(--ck-radius-sm);

  /* Design-system token aliases (unprefixed) — used in component CSS */
  --gradient-sidebar:  linear-gradient(180deg, var(--ck-sidebar-top) 0%, var(--ck-sidebar-mid) 50%, var(--ck-sidebar-bot) 100%);
  --radius-xs:         var(--ck-radius-xs);
  --radius-sm:         var(--ck-radius-sm);
  --radius-md:         var(--ck-radius-md);
  --radius-lg:         var(--ck-radius-lg);
  --radius-pill:       999px;
  --shadow-xs:         var(--ck-shadow-xs);
  --shadow-sm:         var(--ck-shadow-sm);
  --shadow-md:         var(--ck-shadow-md);
  --shadow-lg:         var(--ck-shadow-lg);
  --shadow-xl:         var(--ck-shadow-xl);
  --shadow-primary:       0 2px 6px rgba(71,190,217,0.25);
  --shadow-primary-hover: 0 4px 14px rgba(71,190,217,0.40);
  --ring-focus:        0 0 0 3px rgba(71,190,217,0.18);
  --transition:        var(--ck-transition);
  --transition-md:     var(--ck-transition-md);
  --font-sans:         'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --card-pad:          20px;
  --content-pad:       24px;
  --sidebar-width:     260px;
  --topnav-height:     60px;
}

/* ----------------------------------------------------------------
   2. GLOBAL RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ck-text);
  background-color: var(--ck-page-bg);
}

a {
  color: var(--ck-blue);
  text-decoration: none;
  transition: color var(--ck-transition);
}

a:hover {
  color: var(--ck-blue-hover);
}

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--ck-text);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 0.5em;
}

h1, .h1 { font-size: 26px; }
h2, .h2 { font-size: 21px; }
h3, .h3 { font-size: 17px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 13px; }
h6, .h6 { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.02em;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ck-text-muted);
}

/* ----------------------------------------------------------------
   4. SIDEBAR
   ---------------------------------------------------------------- */

/* Override Now UI Dashboard sidebar — all data-color variants plus our custom "chek" */
.sidebar,
.sidebar[data-color] {
  background: linear-gradient(180deg,
    var(--ck-sidebar-top) 0%,
    var(--ck-sidebar-mid) 50%,
    var(--ck-sidebar-bot) 100%) !important;
}

/* Pseudo-element background used by Now UI Dashboard */
.sidebar::after,
.sidebar[data-color]::after {
  background: linear-gradient(180deg,
    var(--ck-sidebar-top) 0%,
    var(--ck-sidebar-mid) 50%,
    var(--ck-sidebar-bot) 100%) !important;
  opacity: 1 !important;
}

/* Smoothly animate the desktop sidebar width in BOTH directions (200ms ease) — the pin toggle
   (collapse <-> pin open) and the collapsed hover-expand both change width. The transition has to
   live on the unconditional selector, not only the .sidebar-mini one, otherwise the expand
   direction (removing .sidebar-mini) would snap. Width-only so nothing else animates. */
@media (min-width: 991px) {
  .sidebar,
  .sidebar .sidebar-wrapper,
  .main-panel {
    transition: width 0.2s ease;
  }
}

.sidebar .logo {
  padding: 0;
  border-bottom: 1px solid rgba(71, 190, 217, 0.12);
}

.sidebar .logo a.logo-container {
  display: block;
}

.sidebar .logo img {
  /* Logo PNG has a transparent background, so the sidebar gradient shows
     through and it blends with the menu bar. Centered, reduced by a third. */
  display: block;
  width: 45%;
  height: auto;
  margin: 0 auto;
}

.sidebar .navbar-minimize {
  position: absolute;
  right: 12px;
  top: 14px;
}

.sidebar .navbar-minimize .btn {
  background: rgba(71, 190, 217, 0.12);
  border: 1px solid rgba(71, 190, 217, 0.2);
  color: rgba(255, 255, 255, 0.7);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--ck-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ck-transition);
}

.sidebar .navbar-minimize .btn:hover {
  background: rgba(71, 190, 217, 0.22);
  color: #fff;
}

/* User block — avatar stacked above a centred display name. Consistent vertical padding separates
   it from the logo above and the nav links below (the divider is the border-bottom). */
.sidebar .user {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 12px;
  border-bottom: 1px solid rgba(71, 190, 217, 0.10);
  margin: 0;
}

.sidebar .user .photo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(71, 190, 217, 0.35);
  /* Drop the template's left float so the avatar centres, with an 8px gap to the name below. */
  float: none;
  margin: 0 0 8px;
  /* The avatar links to User Settings (collapsed sidebar shows only this), so it's a click target. */
  cursor: pointer;
  transition: border-color var(--ck-transition), opacity var(--ck-transition);
}

.sidebar .user .photo a {
  display: block;
  width: 100%;
  height: 100%;
  /* The template's `.sidebar .user a { padding: 0.5rem 15px }` would push the avatar out of its
     34px circle; zero it so the image fills the link. */
  padding: 0;
}

.sidebar .user .photo:hover {
  border-color: var(--ck-blue);
  opacity: 0.85;
}

.sidebar .user .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar .user .info {
  width: 100%;
}

.sidebar .user .info > a {
  display: block;
  padding: 0;
  text-align: center;
  cursor: pointer;
}

/* The avatar + name are a shortcut to User Settings (like Xero/Slack): teal underline + brighter
   name on hover signals the row is clickable. */
.sidebar .user .info > a:hover span {
  color: #FFFFFF !important;
  text-decoration: underline;
  text-decoration-color: var(--ck-blue);
  text-underline-offset: 3px;
}

.sidebar .user .info a span {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px;
  font-weight: 500;
}

/* Collapsed (icons-only) sidebar: hide the name so only the centred avatar shows. The template
   expands the sidebar on hover and restores the name, so scope the hide to the non-hovered state. */
.sidebar-mini .sidebar:not(:hover) .user .info {
  display: none;
}

/* Navigation items */
.sidebar .sidebar-wrapper {
  overflow-x: hidden;
}

.sidebar .nav {
  padding: 8px 0;
}

.sidebar .nav li {
  position: relative;
}

.sidebar .nav li > a,
.sidebar .nav li > .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin: 2px 12px !important;
  padding: 10px 14px !important;
  border-radius: var(--ck-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 0.015em;
  transition: all var(--ck-transition) !important;
  opacity: 1 !important;
  line-height: 1.4 !important;
  height: auto !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav li > a i,
.sidebar .nav li > .nav-link i {
  color: rgba(71, 190, 217, 0.6) !important;
  font-size: 14px !important;
  width: 18px !important;
  text-align: center;
  flex-shrink: 0;
  margin-right: 0 !important;
  transition: color var(--ck-transition);
}

.sidebar .nav li > a p,
.sidebar .nav li > .nav-link p {
  margin: 0 !important;
  font-size: 13px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

/* Hover state */
.sidebar .nav li > a:hover,
.sidebar .nav li > .nav-link:hover {
  background: rgba(71, 190, 217, 0.10) !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

.sidebar .nav li > a:hover i,
.sidebar .nav li > .nav-link:hover i {
  color: var(--ck-blue) !important;
}

/* Active state */
.sidebar .nav li.active > a,
.sidebar .nav li > a.active,
.sidebar .nav li > .nav-link.active {
  background: rgba(71, 190, 217, 0.16) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.sidebar .nav li.active > a i,
.sidebar .nav li > a.active i,
.sidebar .nav li > .nav-link.active i {
  color: var(--ck-blue) !important;
}

/* Active indicator bar */
.sidebar .nav li.active > a::before,
.sidebar .nav li > a.active::before,
.sidebar .nav li > .nav-link.active::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 3px;
  background: var(--ck-blue);
}

.sidebar .nav li > a.active,
.sidebar .nav li > .nav-link.active {
  padding-left: 22px !important;
}

/* Nav item count badge (e.g. the Tasks open-task count). Teal pill that sits at the end of the
   label when the sidebar is expanded; flips to a small overlay on the top-right of the icon when the
   sidebar is collapsed (mini). Absolutely positioned against the .nav li (which is position:relative)
   so it never shifts the row layout. */
.sidebar .nav li > a .ck-nav-badge,
.sidebar .nav li > .nav-link .ck-nav-badge {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ck-blue);
  color: #FFFFFF !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* Collapsed sidebar (mini, not hovered): the label is hidden, so overlay the badge on the icon's
   top-right. Anchored from the LEFT because the mini bar is overflow-x clipped on the right — the icon
   sits ~26–44px from the left edge, well inside the clip. On hover the bar re-expands (the :not(:hover)
   selector stops matching) and the badge returns to the inline end-of-label position above. */
.sidebar-mini .sidebar:not(:hover) .nav li > a .ck-nav-badge,
.sidebar-mini .sidebar:not(:hover) .nav li > .nav-link .ck-nav-badge {
  position: absolute;
  top: 4px;
  left: 32px;
  right: auto;
  margin: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  box-shadow: 0 0 0 2px var(--ck-sidebar-mid);
}

/* ----------------------------------------------------------------
   5. TOP NAVIGATION BAR
   ---------------------------------------------------------------- */
.main-panel .navbar,
.navbar.navbar-transparent,
.navbar.bg-primary {
  background: var(--ck-surface) !important;
  box-shadow: var(--ck-shadow-xs) !important;
  border-bottom: 1px solid var(--ck-border) !important;
  padding: 0 20px !important;
  min-height: 60px;
}

.navbar .navbar-brand {
  color: var(--ck-text) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em;
}

.navbar .nav-link {
  color: var(--ck-text-secondary) !important;
  font-size: 13px;
  font-weight: 500;
  transition: color var(--ck-transition);
}

.navbar .nav-link:hover {
  color: var(--ck-blue) !important;
}

.navbar .navbar-toggler-bar {
  background: var(--ck-text-secondary) !important;
}

/* Navbar icon (user icon) */
.navbar .nav-link i.now-ui-icons {
  color: var(--ck-text-secondary);
  font-size: 16px;
}

.navbar .dropdown-menu {
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-md);
  padding: 6px;
  min-width: 180px;
  margin-top: 8px;
}

.navbar .dropdown-item {
  font-size: 13px;
  font-weight: 500;
  color: var(--ck-text);
  padding: 8px 12px;
  border-radius: var(--ck-radius-xs);
  transition: all var(--ck-transition);
}

.navbar .dropdown-item:hover {
  background-color: var(--ck-blue-ghost);
  color: var(--ck-blue-active);
}

/* ----------------------------------------------------------------
   6. MAIN PANEL & CONTENT
   ---------------------------------------------------------------- */
.main-panel {
  background: var(--ck-page-bg) !important;
}

.panel-header,
.panel-header.panel-header-sm {
  height: 60px !important;
  min-height: 60px !important;
  background: var(--ck-page-bg) !important;
}

.content {
  background: var(--ck-page-bg);
  padding: 20px 24px 40px !important;
}

/* The top bar is in normal flow (not Now UI's absolute navbar), so undo
   the template's negative offset that pulled content underneath it. */
.main-panel > .content {
  margin-top: 0 !important;
  min-height: calc(100vh - 113px);
}

/* ----------------------------------------------------------------
   7. CARDS
   ---------------------------------------------------------------- */
.card {
  background: var(--ck-surface) !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-md) !important;
  box-shadow: var(--ck-shadow-sm) !important;
  transition: box-shadow var(--ck-transition-md);
}

.card:hover {
  box-shadow: var(--ck-shadow-md) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ck-border) !important;
  padding: 16px 20px !important;
}

.card-header .card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header p {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ck-text) !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}

.card-header .card-category,
.card-header .card-subtitle {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ck-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin: 2px 0 0 !important;
}

.card-body {
  padding: 20px !important;
}

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--ck-border) !important;
  padding: 12px 20px !important;
}

/* Stat / KPI cards */
.card.card-stats .card-body {
  padding: 16px 20px !important;
}

.card.card-stats .statistics .info-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--ck-text-muted) !important;
}

.card.card-stats .statistics h3 {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--ck-text) !important;
  letter-spacing: -0.02em;
}

.card.card-stats .icon-big i {
  color: var(--ck-blue) !important;
}

/* ----------------------------------------------------------------
   8. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--ck-radius-sm) !important;
  padding: 8px 18px !important;
  line-height: 1.4 !important;
  transition: all var(--ck-transition) !important;
  white-space: nowrap;
}

/* Primary / Info → Chek Blue */
.btn-primary,
.btn-info {
  background-color: var(--ck-blue) !important;
  border-color: var(--ck-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(71, 190, 217, 0.25) !important;
}

.btn-primary:hover,
.btn-info:hover {
  background-color: var(--ck-blue-hover) !important;
  border-color: var(--ck-blue-hover) !important;
  box-shadow: 0 4px 14px rgba(71, 190, 217, 0.40) !important;
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-info:active,
.btn-primary:focus,
.btn-info:focus {
  background-color: var(--ck-blue-active) !important;
  border-color: var(--ck-blue-active) !important;
  box-shadow: 0 0 0 3px rgba(71, 190, 217, 0.25) !important;
  transform: translateY(0);
}

/* Outline */
.btn-outline-primary,
.btn-outline-info {
  background-color: transparent !important;
  border-color: var(--ck-blue) !important;
  color: var(--ck-blue) !important;
}

.btn-outline-primary:hover,
.btn-outline-info:hover {
  background-color: var(--ck-blue) !important;
  color: #FFFFFF !important;
}

/* Secondary / neutral */
.btn-secondary,
.btn-default {
  background-color: var(--ck-surface) !important;
  border-color: var(--ck-border-strong) !important;
  color: var(--ck-text-secondary) !important;
  box-shadow: var(--ck-shadow-xs) !important;
}

.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--ck-blue-ghost) !important;
  border-color: var(--ck-blue-border) !important;
  color: var(--ck-blue-active) !important;
}

/* Danger */
.btn-danger {
  background-color: var(--ck-danger) !important;
  border-color: var(--ck-danger) !important;
  color: #FFFFFF !important;
}

.btn-danger:hover {
  background-color: #C0392B !important;
  border-color: #C0392B !important;
}

/* Success */
.btn-success {
  background-color: var(--ck-success) !important;
  border-color: var(--ck-success) !important;
  color: #FFFFFF !important;
}

/* Light / ghost */
.btn-light {
  background-color: var(--ck-surface) !important;
  border-color: var(--ck-border) !important;
  color: var(--ck-text-secondary) !important;
}

.btn-light:hover {
  background-color: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}

/* Round icon buttons */
.btn-icon.btn-round {
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Focus ring */
.btn:focus-visible {
  outline: 3px solid rgba(71, 190, 217, 0.4) !important;
  outline-offset: 2px !important;
}

/* ----------------------------------------------------------------
   9. FORMS & INPUTS
   ---------------------------------------------------------------- */
.form-control,
.form-select {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400;
  color: var(--ck-text) !important;
  background-color: var(--ck-surface) !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-sm) !important;
  padding: 8px 12px !important;
  line-height: 1.5;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ck-blue) !important;
  box-shadow: 0 0 0 3px rgba(71, 190, 217, 0.18) !important;
  outline: none !important;
  background-color: var(--ck-surface) !important;
}

.form-control::placeholder {
  color: var(--ck-text-muted) !important;
  font-weight: 400;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--ck-surface-subtle) !important;
  color: var(--ck-text-muted) !important;
  border-color: var(--ck-border) !important;
}

/* Form field labels — scoped to explicit label components only.
   DO NOT use bare "label" here: Radzen uses <label class="rz-dropdown-label">
   to render selected values, and catching it breaks every dropdown. */
.rz-label,
.form-label,
.col-form-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--ck-text-secondary) !important;
  margin-bottom: 5px !important;
}

/* Explicitly undo any leaking styles on Radzen internal label elements.
   These are selected-value displays, chip labels, and input proxies — not form labels. */
.rz-dropdown-label,
.rz-multiselect-label,
.rz-dropdown .rz-inputtext,
.rz-chips .rz-inputtext,
.rz-chip-label,
.rz-autocomplete-label {
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--ck-text) !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Never let a single-select dropdown's chosen value sit under the clear (×) or trigger (▾) icons. The reset
   above zeroes the label padding, so a long value would otherwise overlap those glyphs — the "× over the words"
   seen across the app on AllowClear dropdowns. Reserve room on the right for both icons and ellipsis-truncate
   the value instead of overlapping them. (Only the closed value label; popup items are unaffected.) */
.rz-dropdown-label {
  padding-right: 2.75rem !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chips (multi-select tags) */
.rz-chip {
  background: var(--ck-blue-ghost) !important;
  border: 1px solid var(--ck-blue-border) !important;
  border-radius: var(--ck-radius-xs) !important;
  color: var(--ck-blue-active) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 2px 6px !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.rz-chip .rz-chip-remove-icon {
  color: var(--ck-text-muted) !important;
  font-size: 11px !important;
}

.rz-chip .rz-chip-remove-icon:hover {
  color: var(--ck-danger) !important;
}

.form-text,
.form-hint {
  font-size: 11px;
  color: var(--ck-text-muted);
  margin-top: 4px;
}

/* Input groups */
.input-group-text {
  background-color: var(--ck-surface-subtle) !important;
  border-color: var(--ck-border) !important;
  color: var(--ck-text-secondary) !important;
  font-size: 13px !important;
  border-radius: var(--ck-radius-sm) !important;
}

/* ----------------------------------------------------------------
   10. TABLES
   ---------------------------------------------------------------- */
.table {
  font-size: 13px;
  color: var(--ck-text);
  border-color: var(--ck-border) !important;
  margin-bottom: 0;
}

.table thead {
  border-bottom: 2px solid var(--ck-border) !important;
}

.table thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--ck-text-muted) !important;
  background-color: transparent !important;
  border-bottom: none !important;
  padding: 10px 16px !important;
  white-space: nowrap;
}

.table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--ck-border) !important;
  border-top: none !important;
  vertical-align: middle;
  color: var(--ck-text);
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

.table tbody tr:hover td {
  background-color: var(--ck-blue-ghost) !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
  background-color: rgba(71, 190, 217, 0.03) !important;
}

/* ----------------------------------------------------------------
   11. BADGES & STATUS CHIPS
   ---------------------------------------------------------------- */
.badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 4px 9px !important;
  border-radius: var(--ck-radius-xs) !important;
}

.badge.bg-primary,
.badge-primary {
  background-color: var(--ck-blue) !important;
  color: #FFFFFF !important;
}

.badge.bg-info,
.badge-info {
  background-color: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}

.badge.bg-success,
.badge-success {
  background-color: var(--ck-success-light) !important;
  color: var(--ck-success) !important;
}

.badge.bg-warning,
.badge-warning {
  background-color: var(--ck-warning-light) !important;
  color: var(--ck-warning) !important;
}

.badge.bg-danger,
.badge-danger {
  background-color: var(--ck-danger-light) !important;
  color: var(--ck-danger) !important;
}

/* ----------------------------------------------------------------
   12. RADZEN COMPONENT OVERRIDES
   ---------------------------------------------------------------- */

/* -- DataGrid -- */
.rz-datatable,
.rz-data-grid {
  border-radius: var(--ck-radius-md) !important;
  border: 1px solid var(--ck-border) !important;
  overflow: hidden;
}

.rz-grid-table thead tr th,
.rz-datatable thead tr th {
  background: var(--ck-surface-subtle) !important;
  color: var(--ck-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 2px solid var(--ck-border) !important;
  border-inline-end: none !important;
  padding: 10px 16px !important;
  font-family: 'Montserrat', sans-serif !important;
  vertical-align: middle;
}

/* Column headers must NEVER truncate. Radzen otherwise clips the title with an
   ellipsis ("YEAR E...") when a column renders narrower than its text. Allow the
   heading to wrap onto a second line instead, so every header stays fully
   readable at any column width / horizontal-scroll state. */
.rz-grid-table thead tr th .rz-column-title,
.rz-datatable thead tr th .rz-column-title,
.rz-grid-table thead tr th .rz-column-title-content,
.rz-datatable thead tr th .rz-column-title-content,
.rz-grid-table thead tr th .rz-cell-data,
.rz-datatable thead tr th .rz-cell-data {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25;
}

/* Centre every column header both axes — even when it wraps to two lines. Making
   the title a full-height flex box means single- and multi-line headers line up
   identically and never sit top-aligned in a taller header row. (This mirrors how
   Radzen styles an explicitly centre-aligned column.) */
.rz-grid-table thead tr th .rz-column-title,
.rz-datatable thead tr th .rz-column-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  text-align: center;
  padding-inline: 0 !important;
}
.rz-grid-table thead tr th .rz-column-title-content,
.rz-datatable thead tr th .rz-column-title-content {
  text-align: center;
}

.rz-grid-table tbody tr td,
.rz-datatable tbody tr td {
  font-size: 13px !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--ck-border) !important;
  border-inline-end: none !important;
  color: var(--ck-text) !important;
  font-family: 'Montserrat', sans-serif !important;
  vertical-align: middle;
}

/* Strip Radzen's default vertical cell borders on the footer/totals row too, so the
   flat Chek grid shows horizontal row separators only (no stray vertical lines). */
.rz-grid-table tfoot tr td,
.rz-datatable tfoot tr td {
  border-inline-end: none !important;
}

/* -- Auto-fit grids (class="ck-grid-autofit") --
   The permanent fix for the recurring fixed-width truncation bugs (Contacts, Evidence
   Documents, Analytics, Audit Sampling, Shared Pages, …). table-layout:auto lets every
   column size itself to its widest content — a Width= left on a column acts as a minimum
   hint, never a clip. nowrap keeps headers and cell values on one line so the browser
   measures true content width, and the grid's own data wrapper scrolls horizontally when
   the total exceeds the available area (the page never scrolls). Prefer adding this class
   over per-column width tuning whenever a grid's content can outgrow its columns. */
.ck-grid-autofit .rz-data-grid-data {
  overflow-x: auto;
}
.ck-grid-autofit .rz-grid-table {
  table-layout: auto !important;
  width: 100%;
  min-width: 100%;
}
.ck-grid-autofit .rz-grid-table thead tr th .rz-column-title,
.ck-grid-autofit .rz-grid-table thead tr th .rz-column-title-content,
.ck-grid-autofit .rz-grid-table thead tr th .rz-cell-data,
.ck-grid-autofit .rz-grid-table tbody tr td .rz-cell-data {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Group label rendered INSIDE the first dropdown item of each group (RadzenDropDown has no native
   grouping) — used by the engagement-letter template picker ("Your templates" / "Starter templates").
   Global because the dropdown popup renders in a body-level portal, outside any page <style> scope. */
.ck-tmpl-group {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ck-text-muted, #6c757d);
  border-bottom: 1px solid var(--ck-border, #e4e7ea);
  margin: 2px 0 4px;
  padding-bottom: 2px;
}

/* Flex-centre every button's content. Radzen renders the button as inline-block
   with its inner box vertical-aligned to "top", which can leave an icon (e.g. the
   red delete/trash) sitting high or low. inline-flex centring guarantees the glyph
   is centred both ways inside the button for all buttons throughout the app. */
.rz-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Never clip button label text. Radzen can render a tight label box (especially on
   Small buttons) whose text gets cut off by the button boundary — e.g. the green
   "Complete"/"Completed" action on the Deadlines tab. Keep the label on one line, let
   the button grow to fit its content, and stop the label span clipping its overflow. */
.rz-button .rz-button-text {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.rz-button {
  white-space: nowrap !important;
  width: auto !important;
  min-width: max-content !important;
}

/* Row-action button group (edit / delete icons etc.) must sit centred in its
   cell and never be clipped. Radzen's .rz-cell-data wrapper hides overflow,
   which can clip the second icon in a tight column — let action groups overflow
   their wrapper and centre vertically with the rest of the row. */
.ck-grid-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
td:has(> .rz-cell-data > .ck-grid-actions) .rz-cell-data,
td .rz-cell-data:has(> .ck-grid-actions) {
  overflow: visible !important;
}
/* Safety net for action columns that don't use the .ck-grid-actions wrapper: a grid cell that
   contains action button(s) anywhere — directly, in a RadzenStack, in a div, or in a frozen cell —
   must never clip them with the default .rz-cell-data overflow/ellipsis (which was cutting off the
   trailing trash/second button). Use a descendant :has so wrapped/frozen action cells are covered. */
.rz-grid-table td .rz-cell-data:has(.rz-button),
.rz-datatable td .rz-cell-data:has(.rz-button) {
  overflow: visible !important;
}

/* -- Status pills / badges / chips must NEVER truncate their status word (global pattern fix) --
   Radzen's cell wrapper is `display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap`,
   and a .rz-badge is itself nowrap — so any pill wider than the cell's content box had its background
   BOX sliced at the right edge, taking the end of the word with it. That is what cut "ADJUSTMENT" short
   in the Journal Entries status column, and 73 grid columns declaring a Width of 140px or less render a
   badge in their template, so every one of them was the same bug waiting for a longer label.
   Two pages had already patched their own grid around it; both were removed in favour of this.

   Note the column itself cannot be made to grow here: Radzen switches the table to `table-layout:fixed`
   as soon as any column declares a Width, which makes min-width on the cell inert. So the rule below
   stops the CLIP (the pill keeps its full text and simply overhangs a genuinely tight column), pills wrap
   as a SET rather than running out of the column, and a column measured too tight for its longest label
   gets its declared width widened at the call site. Never the reverse — shrinking type to fit a column,
   which is what one of the removed patches did, makes one grid's badges silently unlike every other's. */
.ck-pill,
.ck-standard-pill,
.rz-badge {
  flex: 0 0 auto;           /* in a flex row (chip sets, toolbars, stat rows) a pill never shrinks under its text */
  min-width: max-content;   /* ...and nowhere else either — intrinsic width is the whole point of a pill */
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/* white-space:normal applies to the CELL, not the pill: it lets a set of pills wrap onto a second line
   (a taller row) instead of the last one leaving the column. Each pill stays nowrap, so a status word is
   never broken mid-word. */
.rz-grid-table td .rz-cell-data:has(.rz-badge),
.rz-grid-table td .rz-cell-data:has(.ck-pill),
.rz-grid-table td .rz-cell-data:has(.ck-standard-pill),
.rz-datatable td .rz-cell-data:has(.rz-badge),
.rz-datatable td .rz-cell-data:has(.ck-pill),
.rz-datatable td .rz-cell-data:has(.ck-standard-pill) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Restrained icon-only delete button for list/grid rows. Applied via class="ck-grid-delete"
   on the RadzenButton (Radzen merges a custom class onto its own .rz-button). Renders as a
   muted-grey trash icon with no background fill that turns red on hover — matching the size and
   restraint of the neighbouring edit/open icon button (no big solid-red distraction). */
.rz-button.ck-grid-delete,
.rz-button.ck-grid-delete:hover,
.rz-button.ck-grid-delete:focus,
.rz-button.ck-grid-delete:active {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #6c757d !important; /* muted grey */
}
.rz-button.ck-grid-delete .rz-button-icon,
.rz-button.ck-grid-delete i {
  color: #6c757d !important;
  transition: color var(--ck-transition);
}
.rz-button.ck-grid-delete:hover,
.rz-button.ck-grid-delete:hover .rz-button-icon,
.rz-button.ck-grid-delete:hover i {
  color: var(--ck-danger) !important; /* red on hover */
}
.rz-button.ck-grid-delete:disabled,
.rz-button.ck-grid-delete.rz-state-disabled,
.rz-button.ck-grid-delete[disabled] {
  opacity: 1 !important;
}
.rz-button.ck-grid-delete:disabled,
.rz-button.ck-grid-delete:disabled .rz-button-icon,
.rz-button.ck-grid-delete:disabled i,
.rz-button.ck-grid-delete.rz-state-disabled,
.rz-button.ck-grid-delete.rz-state-disabled .rz-button-icon,
.rz-button.ck-grid-delete[disabled],
.rz-button.ck-grid-delete[disabled] .rz-button-icon,
.rz-button.ck-grid-delete[disabled] i {
  color: #c5c8cc !important; /* muted, no red even on hover when disabled */
}

/* Administration list rows (User Settings-style). The whole row is clickable, so
   give a clear hover accent in addition to the inherited card hover shadow. */
.ck-admin-row {
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition-md);
}
.ck-admin-row:hover {
  border-color: var(--ck-blue) !important;
}

.rz-grid-table tbody tr:hover td,
.rz-datatable tbody tr:hover td {
  background-color: var(--ck-blue-ghost) !important;
}

.rz-grid-table tbody tr.rz-state-highlight td {
  background-color: var(--ck-blue-ghost) !important;
}

/* Clickable name/title cell inside a data grid — the ONLY part of the row that
   navigates to a detail page. Shows the teal link affordance + pointer on this
   text only; the rest of the row keeps the default cursor and does nothing. */
.ck-grid-link {
  color: var(--ck-blue);
  cursor: pointer;
  font-weight: 600;
  transition: color var(--ck-transition);
}

.ck-grid-link:hover,
.ck-grid-link:focus-visible {
  color: var(--ck-blue-hover);
  text-decoration: underline;
  outline: none;
}

/* Dashboard "Active Engagements" grid (scoped via the .ck-dashboard-grid class on the
   RadzenDataGrid). table-layout:fixed makes the no-width Engagement column take the
   remaining space and TRUNCATE its content instead of widening the table, so a long
   engagement name shows an ellipsis (full name via the cell's title tooltip) rather
   than pushing the grid into horizontal scroll. The fixed-width Client/Status/Start
   Date columns are sized to fit their headers on one line. */
.ck-dashboard-grid .rz-grid-table {
  table-layout: fixed;
  width: 100%;
}

/* Keep this grid's headers on a single line. The global rule wraps headers to a second
   line as a safe fallback; here the columns are width-tuned to fit, so nowrap avoids the
   "START / DATE" two-line wrap. Scoped + higher specificity so it only affects this grid. */
.ck-dashboard-grid .rz-grid-table thead tr th .rz-column-title,
.ck-dashboard-grid .rz-grid-table thead tr th .rz-column-title-content {
  white-space: nowrap !important;
}

/* Engagement name cell: fills its (flex) column and truncates with an ellipsis when too
   long. The full name is always available via the span's native title tooltip, so the
   name is never hard-clipped without a way to read it. */
.ck-grid-link-truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Engagements list grid (class ck-eng-grid). With the added Year End Date column the fixed-width
   columns can exceed a narrow viewport, so this grid SCROLLS HORIZONTALLY instead of squeezing
   columns / clipping the ⋮ actions. The scroll lives on Radzen's inner data wrapper (the table's
   thead+tbody scroll together) so the rounded border + global overflow:hidden on the outer are kept;
   the min-width forces the scrollbar once the columns no longer fit. The flex Engagement column keeps
   a sensible minimum (≈ min-width − the fixed columns) so it never collapses. */
.ck-eng-grid .rz-data-grid-data { overflow-x: auto; }
.ck-eng-grid .rz-grid-table { min-width: 1040px; }
/* Keep this grid's headers on a single line — the columns are width-tuned to fit (e.g. "YEAR END DATE"),
   so the global wrap-to-two-lines fallback must not kick in here. Scoped + higher specificity. */
.ck-eng-grid .rz-grid-table thead tr th .rz-column-title,
.ck-eng-grid .rz-grid-table thead tr th .rz-column-title-content {
  white-space: nowrap !important;
}

/* Report tables (Reports → Engagement Summary / Client List, class ck-report-grid). Keep every
   header on a single line — the columns are width-tuned to fit, so headers like "YEAR END" and
   "LAST UPDATED" must not wrap to two lines. Scoped + higher specificity than the global wrap rule. */
.ck-report-grid .rz-grid-table thead tr th .rz-column-title,
.ck-report-grid .rz-grid-table thead tr th .rz-column-title-content {
  white-space: nowrap !important;
}

/* Row action button (vertical-ellipsis "more" menu) inside a data grid cell.
   Centres the button both ways within the cell so it lines up with the row's
   text, and keeps a little breathing room from the right edge so it is never
   clipped. The cell itself keeps the default cursor — only .ck-grid-link clicks. */
.ck-task-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-right: 4px;
}

/* Task Details: the "Status & Assignment" and "Sign-Off" panels sit side by side
   as two separate, self-contained cards (RadzenCard supplies the shared app card
   border/radius/background + padding). The flex wrapper gives a clear 16px gap and
   stretches both cards to equal height with aligned tops. Stacks on narrow screens. */
.ck-task-panels {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.ck-task-panels > .ck-task-panel {
  flex: 1 1 0;
  min-width: 0;
}
.ck-task-panel-title {
  display: block;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
@media (max-width: 767.98px) {
  .ck-task-panels {
    flex-direction: column;
  }
}

.rz-pager {
  border-top: 1px solid var(--ck-border) !important;
  background: var(--ck-surface-subtle) !important;
  padding: 8px 16px !important;
}

.rz-pager .rz-pager-nav .rz-button {
  background: var(--ck-surface) !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-xs) !important;
  color: var(--ck-text-secondary) !important;
}

.rz-pager .rz-pager-nav .rz-button:hover {
  background: var(--ck-blue-ghost) !important;
  color: var(--ck-blue) !important;
}

/* -- Buttons -- */
.rz-button {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--ck-radius-sm) !important;
  padding: 8px 18px !important;
  transition: all var(--ck-transition) !important;
}

.rz-button.rz-primary,
.rz-button.rz-variant-filled.rz-primary {
  background: var(--ck-blue) !important;
  border-color: var(--ck-blue) !important;
  color: #FFFFFF !important;
}

.rz-button.rz-primary:hover {
  background: var(--ck-blue-hover) !important;
  border-color: var(--ck-blue-hover) !important;
  box-shadow: 0 4px 14px rgba(71, 190, 217, 0.35) !important;
}

.rz-button.rz-secondary,
.rz-button.rz-variant-outlined {
  background: transparent !important;
  border-color: var(--ck-border-strong) !important;
  color: var(--ck-text-secondary) !important;
}

.rz-button.rz-secondary:hover,
.rz-button.rz-variant-outlined:hover {
  background: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}

.rz-button.rz-danger,
.rz-button.rz-variant-filled.rz-danger {
  background: var(--ck-danger) !important;
  border-color: var(--ck-danger) !important;
  color: #FFFFFF !important;
}

.rz-button.rz-danger:hover {
  background: #C0392B !important;
}

.rz-button.rz-success,
.rz-button.rz-variant-filled.rz-success {
  background: var(--ck-success) !important;
  border-color: var(--ck-success) !important;
  color: #FFFFFF !important;
}

.rz-button.rz-success:hover {
  background: #219653 !important;
  border-color: #219653 !important;
  box-shadow: 0 4px 14px rgba(39, 174, 96, 0.35) !important;
  transform: translateY(-1px) !important;
}

.rz-button.rz-info,
.rz-button.rz-variant-filled.rz-info {
  background: var(--ck-blue) !important;
  border-color: var(--ck-blue) !important;
  color: #FFFFFF !important;
}

.rz-button.rz-info:hover {
  background: var(--ck-blue-hover) !important;
  border-color: var(--ck-blue-hover) !important;
  box-shadow: 0 4px 14px rgba(71, 190, 217, 0.35) !important;
  transform: translateY(-1px) !important;
}

.rz-button.rz-warning,
.rz-button.rz-variant-filled.rz-warning {
  background: var(--ck-warning) !important;
  border-color: var(--ck-warning) !important;
  color: #FFFFFF !important;
}

.rz-button.rz-warning:hover {
  background: #CA6F1E !important;
  border-color: #CA6F1E !important;
}

/* -- Text inputs --
   Scope to actual <input> elements only.
   .rz-inputtext is also applied to <label class="rz-dropdown-label rz-inputtext">
   (the selected-value display inside every RadzenDropDown), so targeting bare
   .rz-inputtext adds a border/padding/background to that label and breaks the dropdown. */
.rz-textbox,
.rz-input,
input.rz-inputtext {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-sm) !important;
  color: var(--ck-text) !important;
  padding: 8px 12px !important;
  background: var(--ck-surface) !important;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition) !important;
}

.rz-textbox:focus,
.rz-input:focus,
input.rz-inputtext:focus,
.rz-state-focus input.rz-inputtext,
.rz-state-focus .rz-textbox {
  border-color: var(--ck-blue) !important;
  box-shadow: 0 0 0 3px rgba(71, 190, 217, 0.18) !important;
  outline: none !important;
}

/* Hard reset for .rz-inputtext when used as a display label inside dropdowns.
   These must undo border/padding/background set by the rule above in case
   specificity ever lets it bleed through. */
label.rz-inputtext,
.rz-dropdown-label.rz-inputtext,
.rz-multiselect .rz-inputtext {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  color: var(--ck-text) !important;
  margin-bottom: 0 !important;
}

/* -- Dropdown / Select -- */
.rz-dropdown,
.rz-select {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-sm) !important;
  color: var(--ck-text) !important;
  background: var(--ck-surface) !important;
}

.rz-dropdown:focus,
.rz-state-focus.rz-dropdown {
  border-color: var(--ck-blue) !important;
  box-shadow: 0 0 0 3px rgba(71, 190, 217, 0.18) !important;
}

.rz-dropdown-panel,
.rz-select-panel {
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-md) !important;
  box-shadow: var(--ck-shadow-md) !important;
  background: var(--ck-surface) !important;
  overflow: hidden;
}

.rz-dropdown-item,
.rz-select-item {
  font-size: 13px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: var(--ck-text) !important;
  padding: 9px 14px !important;
  transition: background var(--ck-transition) !important;
}

.rz-dropdown-item:hover,
.rz-select-item:hover,
.rz-dropdown-item.rz-state-highlight,
.rz-state-highlight.rz-select-item {
  background: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}

/* -- Date Picker -- */
.rz-calendar .rz-datepicker-header {
  background: var(--ck-blue) !important;
  color: #FFFFFF !important;
  border-radius: var(--ck-radius-sm) var(--ck-radius-sm) 0 0;
}

.rz-calendar td.rz-state-highlight a {
  background: var(--ck-blue) !important;
  color: #FFFFFF !important;
  border-radius: var(--ck-radius-xs);
}

.rz-calendar td a:hover {
  background: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}

/* -- Numeric -- */
.rz-inputnumber .rz-inputtext,
.rz-numeric input {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-sm) !important;
  color: var(--ck-text) !important;
}

/* Suppress the numeric increment/decrement spinner buttons app-wide. Monetary and quantity values are
   entered by typing, not stepping, so every RadzenNumeric renders as a plain numeric text input. The
   buttons are absolutely positioned, so hiding them leaves the input's layout intact. */
.rz-numeric-up,
.rz-numeric-down {
  display: none !important;
}

/* -- Status pills (Sent / Viewed / Accepted timelines, etc.) -- */
.ck-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2f5;
  color: #6c757d;
  border: 1px solid #e2e8ec;
}
.ck-pill.on {
  background: #e6f4ea;
  color: #198754;
  border-color: #bfe3c8;
}

/* -- Inline field validation (ONE consistent pattern across every form) --
   Hard error: red message under the field, blocks save. Soft warning: amber, dismissible, never blocks. */
.ck-fielderr {
  color: var(--ck-danger, #dc3545);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.35;
}
.ck-fieldwarn {
  color: #8a5a00;
  background: #fff8e6;
  border: 1px solid #ffe2a6;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  line-height: 1.35;
}
.ck-fieldwarn a {
  color: #8a5a00;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

/* Read-only rich-text display (e.g. rolled-forward prior-year narratives) — renders RTE HTML, not editable */
.ck-readonly-rte {
  border: 1px solid var(--ck-border, #d9e2e8);
  border-radius: 6px;
  padding: 8px 10px;
  background: #f8fafb;
  color: #4a5b66;
  font-size: 0.9rem;
  line-height: 1.5;
}
.ck-readonly-rte p { margin: 0 0 6px; }
.ck-readonly-rte p:last-child { margin-bottom: 0; }

/* -- Dialog / Modal -- */
.rz-dialog,
.rz-overlaypanel {
  border-radius: var(--ck-radius-md) !important;
  box-shadow: var(--ck-shadow-xl) !important;
  border: 1px solid var(--ck-border) !important;
  overflow: hidden;
}

/* Keep EVERY Radzen modal (form dialogs, the PDF preview/finalise modal, confirms) CONTAINED within the
   viewport with its header always on screen — app-wide (all dialogs share one Radzen host, so this is the
   ONE place). Two root causes the earlier fix missed, why the clipped-title bug kept recurring:
   (a) Z-INDEX: the app's sticky top bar (.ck-topbar) is z-index 1029, ABOVE Radzen's dialog wrapper, so the
       opaque header painted OVER the dialog's title/close. The dialog must sit above the header.
       AND the LEFT SIDEBAR, which the header fix missed: `.sidebar` is position:fixed z-index **9999**
       (now-ui-dashboard.css:6129) — an order of magnitude above the 1100 used here — so it punched through
       the modal's left edge (the Date field and the journal grid's left column disappeared behind the nav)
       while the rest of the dialog looked fine. The mask is a full-viewport overlay, so it COVERED the
       sidebar geometrically but painted UNDER it, leaving the nav undimmed and still clickable through the
       modal. The whole modal layer therefore sits above 9999. Anything else that must overlay the app
       (#bodyClick 9999, .loading 9999) is at or below that, so 10000+ clears them all.
   (b) HEADER CLEARANCE: centring in the FULL viewport let a tall/centred dialog's top slide under the 60px
       header. Reserve the header height at the top so the centred dialog always sits below it.
   Plus: position:static (transform:none, margin:0) neutralises any inline top/left Radzen sets; the dialog is
   a flex column capped to the padded area; header + footer stay pinned (don't scroll); only the body scrolls. */
/* Drive Radzen's OWN variables as well as the class overrides below. Radzen ships
   --rz-dialog-mask-zindex:1000 / --rz-dialog-zindex:1001, and reads them in FOUR rules:
   .rz-dialog-wrapper, .rz-dialog, .rz-dialog-mask AND .rz-dialog-side. The class overrides below
   cover the first three; setting the variables covers .rz-dialog-side too, so a side dialog added
   later cannot silently reintroduce the behind-the-sidebar bug. (No OpenSide call sites today.) */
:root {
  --rz-dialog-mask-zindex: 10000;
  --rz-dialog-zindex: 10001;
}
.rz-dialog-mask { z-index: 10000 !important; }  /* backdrop above the header (1029) AND the sidebar (9999) */
.rz-dialog-wrapper {
  position: fixed !important;           /* a true full-viewport overlay so centring references the screen */
  inset: 0 !important;                  /* (overrides any inline top Radzen sets on the wrapper too) */
  z-index: 10001 !important;            /* ABOVE .ck-topbar (1029) AND .sidebar (9999) — neither clips it now */
  display: flex !important;
  align-items: center !important;       /* vertical centre within the padded (header-cleared) area */
  justify-content: center !important;   /* horizontal centre */
  padding: 76px 1rem 24px !important;   /* reserve the 60px sticky header (+gap) at the top */
  overflow: hidden !important;          /* the dialog body scrolls internally, not the wrapper */
}
.rz-dialog {
  /* POSITIONED (not static): Radzen renders .rz-dialog-mask as an absolutely-positioned sibling of the dialog
     inside the wrapper, so a STATIC dialog paints UNDER that positioned mask (the grey backdrop lands in front
     of the dialog). position:relative + a z-index above the mask puts the dialog back on top; top/left:auto
     neutralise Radzen's inline offsets so the flex wrapper still centres it (same layout as static). */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 10001 !important;     /* above .rz-dialog-mask (10000), incl. when the mask sits inside the wrapper */
  transform: none !important;    /* drop any inline transform that would shift it up */
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 100px) !important;  /* fits the padded area (76 top + 24 bottom) — never clips top/bottom */
  max-width: calc(100vw - 2rem) !important;
}
.rz-dialog .rz-dialog-titlebar { flex: 0 0 auto !important; }   /* header: pinned, always visible */
.rz-dialog .rz-dialog-content {
  flex: 1 1 auto !important;      /* body: the only region that scrolls */
  min-height: 0 !important;       /* allow it to shrink below its content so it can scroll */
  overflow-y: auto !important;
}
.rz-dialog .rz-dialog-footer { flex: 0 0 auto !important; }     /* footer: pinned at the bottom */

/* -- Radzen POPUPS above the dialog layer (companion to the dialog z-index fix above) --
   Every Radzen popup — the DropDown panel, the DatePicker calendar, AutoComplete, ContextMenu,
   Tooltip — is TELEPORTED to <body> by Radzen.openPopup (Radzen.Blazor.js) and given a HARD-CODED
   inline z-index of 2000. Raising the dialog to 10001 above therefore left every in-dialog popup
   BELOW its own dialog: the panel opened, but painted BEHIND the dialog. Symptom-wise that reads as
   "the dropdown won't open / does nothing" when the dialog covers it, or "the datepicker renders
   behind the dialog" when it peeks past the edge — the same regression, app-wide, on every Radzen
   popup opened from inside a dialog. openPopup adds .rz-popup to every popup it opens (except the
   RadzenOverlayPanel, which keeps .rz-overlaypanel), so these two selectors cover them all. The
   inline z-index:2000 is beaten here because an author !important rule out-ranks an inline style.
   Sits ABOVE the dialog (10001) and help panel (10100) but BELOW toasts (10200) — a save toast must
   still out-rank an open popup, matching the dialog fix's "a toast is the one thing that out-ranks
   a modal". On a normal page this also clears the sidebar (9999), which the old 2000 lost to. */
.rz-popup,
.rz-overlaypanel { z-index: 10150 !important; }

.rz-dialog-titlebar,
.rz-overlaypanel-close-container {
  background: var(--ck-surface) !important;
  border-bottom: 1px solid var(--ck-border) !important;
  padding: 16px 20px !important;
}

.rz-dialog-titlebar .rz-dialog-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ck-text) !important;
  letter-spacing: -0.01em !important;
}

.rz-dialog-content {
  padding: 20px !important;
  background: var(--ck-surface) !important;
}

.rz-dialog-footer {
  background: var(--ck-surface-subtle) !important;
  border-top: 1px solid var(--ck-border) !important;
  padding: 12px 20px !important;
}

.rz-dialog-titlebar .rz-dialog-titlebar-close,
.rz-dialog-titlebar .rz-dialog-close {
  color: var(--ck-text-muted) !important;
  border-radius: var(--ck-radius-xs) !important;
  transition: all var(--ck-transition) !important;
}

.rz-dialog-titlebar .rz-dialog-titlebar-close:hover,
.rz-dialog-titlebar .rz-dialog-close:hover {
  background: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}

/* -- Tabs -- */
.rz-tabview-nav {
  border-bottom: 2px solid var(--ck-border) !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.rz-tabview-nav li .rz-tabview-nav-link {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ck-text-secondary) !important;
  padding: 10px 18px !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all var(--ck-transition) !important;
  margin-bottom: -2px;
}

.rz-tabview-nav li:hover .rz-tabview-nav-link {
  color: var(--ck-blue) !important;
  border-bottom-color: var(--ck-blue-light) !important;
}

.rz-tabview-nav li.rz-tabview-selected .rz-tabview-nav-link {
  color: var(--ck-blue) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--ck-blue) !important;
  background: transparent !important;
}

.rz-tabview-panels {
  padding: 20px 0 !important;
}

/* -- Engagement left sub-navigation: keep the side-nav visible while the (often very long) workpaper
      content scrolls. For Planning the nav is the <ul class="rz-tabview-nav"> rendered as a direct child
      of .ck-planning-nav > .rz-tabview (RadzenTabs TabPosition="Left"); Fieldwork renders its own nav
      (.ck-fw-nav, further down) and hides Radzen's, but sticks it exactly the same way. Either way it
      sticks just below the 60px sticky top bar; align-self:flex-start lets it keep its natural height
      (rather than stretching to the content) so it has room to stick, and it scrolls internally only if
      it is ever taller than the viewport.

      ⚠️ THE REAL DEFEATER (why the earlier fix didn't take): position:sticky resolves against the nearest
      scrolling ancestor, and Radzen's default `.rz-tabview-panels { overflow:auto }` on the OUTER engagement
      tabs (Summary/Planning/Fieldwork/…) is exactly that. The Fieldwork content lives inside that outer
      panels container, so the nav stuck to it instead of the viewport — and since the container has no fixed
      height it grows with the content and the WINDOW scrolls, dragging the "sticky" nav up with the page.
      Earlier fixes either set overflow:visible on the INNER fieldwork .rz-tabview (a sibling of the nav, not an
      ancestor — no effect) OR targeted `.ck-engagement-tabs > .rz-tabview-panels`, which relied on RadzenTabs
      copying its `class` onto the .rz-tabview root (it does NOT reliably), so the override never matched and the
      outer panels kept overflow:auto. The reliable fix wraps the outer tabs in a plain <div class="ck-eng-tabs-wrap">
      and neutralises the OUTER panels' scroll-port through that guaranteed selector, so the nav sticks to the
      window. (`> .rz-tabview` matches only the OUTER tabs root — the wrapper's single child — never the nested
      Fieldwork/Communication/Completion tabviews, whose own panels keep their overflow.) */
.ck-eng-tabs-wrap > .rz-tabview > .rz-tabview-panels {
  overflow: visible !important;
}

/* Planning (.ck-planning-nav) shares the same sticky left sub-nav treatment as Fieldwork so all four
   engagement sub-navigations (Planning / Fieldwork / Communication / Completion) behave identically. */
.ck-fieldwork-nav > .rz-tabview,
.ck-planning-nav > .rz-tabview {
  align-items: flex-start;
  overflow: visible;   /* keep visible too: no scroll-port between the nav and the window */
}

/* All three grouped navs (Fieldwork, Planning, Completion) now render their own nav and hide Radzen's,
   so nothing here needs to stick Radzen's <ul> any more.

   -- Communication (.ck-comm-nav) -----------------------------------------------------------------
   Communication keeps Radzen's own strip and stays FLAT — a short list with no natural stages, and its
   inner-tab indices are hardcoded in WorkpaperCatalog and the Portal Messages deep-link, so the panels
   must not be touched. But left as Radzen shipped it, it was the one engagement sub-nav that looked like
   a different application: pill tabs on a grey block beside three hand-rolled navs of quiet indented rows.
   So the STRIP is restyled to the .ck-fw-item vocabulary instead — same width, same sticky behaviour, same
   indent, same cyan selected rail. Nothing structural moves.

   ⚠️ Radzen 10.4.9 does not reliably put .rz-tabview-nav-link on the vertical strip's clickable element —
   it may be a bare <a> or <button>. Every rule below therefore targets `li > a, li > button` AND the link
   class, or it silently matches nothing (the same trap the Fieldwork nav indicator hit). */
.ck-comm-nav > .rz-tabview {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow: visible;
}

.ck-comm-nav > .rz-tabview > .rz-tabview-nav {
  flex: 0 0 236px;
  width: 236px;
  position: sticky;
  top: 72px;
  align-self: flex-start;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ck-comm-nav > .rz-tabview > .rz-tabview-panels {
  flex: 1;
  min-width: 0;   /* without this the grids inside force the nav to shrink instead of scrolling */
  padding: 0 !important;
}

/* The li is a pass-through wrapper here — every visible style belongs to the <a>/<button> inside it, which
   is where the hover and selected states are painted below.
   Neutralising it is not optional: Radzen puts the tab's grey fill on the LI (`.rz-tabview-nav li` sets
   background-color, a border, and .rz-tabview-left adds a 2px left border and a radius), so transparenting
   only the <ul> and the anchor left that grey painting behind them. Communication was the one engagement
   sub-nav sitting on a grey block while Planning, Fieldwork and Completion were clean — the restyle above
   had reached everything except the element actually drawing it. It also made the selected row a BLEND of
   Radzen's selected-tab fill and the intended cyan ghost, rather than the ghost alone. */
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li,
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li:hover,
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li.rz-tabview-selected {
  width: 100%;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.ck-comm-nav > .rz-tabview > .rz-tabview-nav li > a,
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li > button,
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li .rz-tabview-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0 !important;
  padding: 6px 8px 6px 17px !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--ck-text-secondary) !important;
  cursor: pointer;
  transition: background var(--ck-transition), color var(--ck-transition);
}

.ck-comm-nav > .rz-tabview > .rz-tabview-nav li:hover > a,
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li:hover > button,
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li:hover .rz-tabview-nav-link {
  background: var(--ck-blue-ghost) !important;
  color: var(--ck-text) !important;
  border-bottom-color: transparent !important;
}

.ck-comm-nav > .rz-tabview > .rz-tabview-nav li.rz-tabview-selected > a,
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li.rz-tabview-selected > button,
.ck-comm-nav > .rz-tabview > .rz-tabview-nav li.rz-tabview-selected .rz-tabview-nav-link {
  background: var(--ck-blue-ghost) !important;
  border-left-color: #4EC3E0 !important;
  color: var(--ck-text) !important;
  font-weight: 600 !important;
}

@media (max-width: 900px) {
  .ck-comm-nav > .rz-tabview { flex-direction: column; gap: 8px; }
  .ck-comm-nav > .rz-tabview > .rz-tabview-nav {
    position: static; width: 100%; flex: none; max-height: none;
  }
}

/* -- Fieldwork stage nav ------------------------------------------------------------------------
   Fieldwork's left nav is rendered by ViewEngagement, not by Radzen: fifteen flat workpapers are a
   wall, so they are grouped into the five stages of a job in the order the work is actually done.
   RadzenTabs still owns the panels and the selected index — only its tab STRIP is hidden here, which
   is why the panels never had to be reordered and every ?wp= deep-link still resolves.

   Hierarchy matters: the four-phase stepper in the engagement header is the progress indicator, so
   these headers stay deliberately quiet — a hairline rule and a small mono caption, no chips, no
   weight, nothing that competes with the stepper sitting directly above them. */
.ck-fieldwork-nav {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Radzen's own left strip. Hidden rather than switched to TabPosition.Top so the panels keep the
   left-tab layout the rest of the engagement view is built around. .ck-fieldwork-nav is the shared
   wrapper class for all three grouped navs — Planning and Completion add .ck-planning-nav /
   .ck-completion-nav alongside it purely as hooks, not as separate layouts. */
.ck-fieldwork-nav > .rz-tabview > .rz-tabview-nav {
  display: none !important;
}

/* Planning's section list is the longest of the three and its titles are the wordiest
   ("Opening Balances & Comparatives"), so it gets a little more room before wrapping. */
.ck-planning-nav > .ck-fw-nav {
  flex-basis: 252px;
  width: 252px;
}

.ck-fieldwork-nav > .rz-tabview {
  flex: 1;
  min-width: 0;   /* without this the grids inside force the nav to shrink instead of scrolling */
}

.ck-fw-nav {
  flex: 0 0 236px;
  width: 236px;
  position: sticky;
  top: 72px;
  align-self: flex-start;
  max-height: calc(100vh - 84px);   /* taller than the viewport ⇒ the nav scrolls, not the page */
  overflow-y: auto;
  overflow-x: hidden;
}

.ck-fw-stagehead {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ck-border);
  padding: 11px 6px 6px;
  cursor: pointer;
  text-align: left;
}

/* The first header would otherwise draw a rule against the tab boundary directly above it. */
.ck-fw-stage:first-child .ck-fw-stagehead {
  border-top: 0;
  padding-top: 2px;
}

.ck-fw-chev {
  flex: 0 0 auto;
  font-size: 8px;
  color: #0B2733;
  opacity: .28;
  transition: transform 180ms ease, opacity var(--ck-transition), color var(--ck-transition);
}

.ck-fw-stage.open .ck-fw-chev {
  transform: rotate(90deg);
}

/* A stage caption must sit BELOW the 13px workpaper names in visual weight — findable when scanned for,
   ignorable otherwise. It was previously above them: tracked mono uppercase at 55% opacity is a loud
   combination, and it put these headers in the same register as the top phase stepper, which they must
   not compete with. Tracking is what did most of the damage, so it is cut to almost nothing. */
.ck-fw-stagelabel {
  flex: 1;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(11, 39, 51, .38);
  transition: color var(--ck-transition);
}

.ck-fw-stagecount {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 9.5px;
  color: rgba(11, 39, 51, .32);
}

/* All-concluded swaps the count for a green tick — a colour change ONLY. It used to also jump to 11px
   and weight 700, which made finished stages the loudest thing in the nav: the opposite of what a nav
   should emphasise, since a finished stage is the one needing no attention. */
.ck-fw-stagecount.done {
  color: var(--ck-success);
}

/* Hover darkens rather than turning brand-cyan. Cyan is the app's interactive accent, and wearing it
   made these captions read as controls competing with the workpaper rows — they are labels that happen
   to be clickable, and the chevron already carries the affordance. */
.ck-fw-stagehead:hover .ck-fw-stagelabel {
  color: rgba(11, 39, 51, .58);
}

.ck-fw-stagehead:hover .ck-fw-stagecount:not(.done) {
  color: rgba(11, 39, 51, .5);
}

.ck-fw-stagehead:hover .ck-fw-chev {
  opacity: .5;
}

/* Collapse animates on max-height rather than unmounting, so it can transition at all. The cap only
   has to exceed the tallest stage (six items ≈ 12rem); it is never the visible height. */
.ck-fw-stageitems {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}

.ck-fw-stage.open .ck-fw-stageitems {
  max-height: 34rem;
}

.ck-fw-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0;
  padding: 6px 8px 6px 17px;   /* indented under its header so the grouping reads */
  font-size: 13px;
  line-height: 1.35;
  color: var(--ck-text-secondary);
  cursor: pointer;
  transition: background var(--ck-transition), color var(--ck-transition);
}

.ck-fw-item:hover {
  background: var(--ck-blue-ghost);
  color: var(--ck-text);
}

.ck-fw-item.sel {
  background: var(--ck-blue-ghost);
  border-left-color: #4EC3E0;
  color: var(--ck-text);
  font-weight: 600;
}

/* Concluded reads as done-and-quiet, exactly as the old generated CSS did — muted label, green tick. */
.ck-fw-item.done .ck-fw-itemlabel {
  color: #9aa0a6;
}

/* PINNED entries (Planning Overview, Completion Summary) sit above the first stage header with no
   header of their own, so they carry the group indent themselves and a little breathing room below. */
.ck-fw-item.pinned {
  padding-left: 8px;
  font-weight: 500;
}

.ck-fw-item.pinned + .ck-fw-stage .ck-fw-stagehead,
.ck-fw-item.pinned + .ck-fw-item {
  margin-top: 2px;
}

/* A pinned entry is followed by the first stage header, which suppresses its own top rule as the
   first child — but it is no longer first here, so the rule has to come back. */
.ck-fw-item.pinned ~ .ck-fw-stage:first-of-type .ck-fw-stagehead {
  border-top: 1px solid var(--ck-border);
  padding-top: 11px;
}

.ck-fw-itemlabel {
  flex: 1;
  min-width: 0;
}

.ck-fw-tick {
  flex: 0 0 auto;
  color: var(--ck-success);
  font-weight: 700;
  font-size: 12px;
}

/* "Not applicable" — deliberately NOT the green tick. Both settle a workpaper and both let a stage
   reach its total, but a tick says the work was done and this says it was decided against, with a
   reason on the workpaper itself. Neutral grey, mono, so it reads as a status not an achievement. */
.ck-fw-na {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  color: rgba(11, 39, 51, .45);
  background: rgba(11, 39, 51, .05);
  border: 1px solid rgba(11, 39, 51, .1);
  border-radius: 4px;
  padding: 1px 4px;
  line-height: 1.4;
}

:root[data-theme="dark"] .ck-fw-na {
  color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}

/* "ref" — a reference/derived view (Contacts, Deadlines, the Risk Map, the Schedule of Adjustments,
   Diagnostics). It has nothing to sign off, so it is not in its stage's X/Y. Without the marker a stage
   reading "1/4" above six rows looks like it has lost count; with it, the two uncounted rows are visible.
   Quieter than .ck-fw-na — no chip, no border: this is a property of the row, not a decision someone
   made about it. */
.ck-fw-ref {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 8px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(11, 39, 51, .18);
}

/* Tighten the marker to the name it belongs to. .ck-fw-itemlabel is flex:1, which pushed every "ref" out
   to the nav's right edge — and because most reference rows sit together, they lined up into a vertical
   stripe of repeated text reading as a column of its own. Letting the label size to its content on these
   rows only puts the marker beside its name, where it is an aside rather than a list. The tick and the
   N/A chip deliberately KEEP the right edge: those are per-row status, and a status column that scans
   straight down is the point of them. */
.ck-fw-item:has(.ck-fw-ref) .ck-fw-itemlabel {
  flex: 0 1 auto;
}

.ck-fw-item:hover .ck-fw-ref,
.ck-fw-item.sel .ck-fw-ref { color: rgba(11, 39, 51, .4); }

:root[data-theme="dark"] .ck-fw-ref { color: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .ck-fw-item:hover .ck-fw-ref,
:root[data-theme="dark"] .ck-fw-item.sel .ck-fw-ref { color: rgba(255, 255, 255, .38); }

@media (max-width: 900px) {
  .ck-fieldwork-nav { flex-direction: column; gap: 8px; }
  .ck-fw-nav { position: static; width: 100%; flex: none; max-height: none; }
}

/* Kept in step with the light-theme weights above — a caption lightened in one theme and not the other
   is only half-calmed. The chevron carries its own opacity, so dark mode sets colour only. */
:root[data-theme="dark"] .ck-fw-stagelabel { color: rgba(255, 255, 255, .34); }
:root[data-theme="dark"] .ck-fw-stagecount { color: rgba(255, 255, 255, .28); }
:root[data-theme="dark"] .ck-fw-chev { color: rgba(255, 255, 255, .85); }
:root[data-theme="dark"] .ck-fw-stagehead:hover .ck-fw-stagelabel { color: rgba(255, 255, 255, .55); }
:root[data-theme="dark"] .ck-fw-stagehead:hover .ck-fw-stagecount:not(.done) { color: rgba(255, 255, 255, .46); }
:root[data-theme="dark"] .ck-fw-item { color: var(--ck-text-secondary); }
:root[data-theme="dark"] .ck-fw-item.done .ck-fw-itemlabel { color: rgba(255, 255, 255, .38); }

/* -- Notification / Toast -- */
/* TOP OF THE STACK, deliberately. Radzen ships .rz-notification at z-index 1002, which was below the
   dialog layer even BEFORE it was raised (mask 1099 / dialog 1100) — so a NotificationService.Notify
   raised from inside a dialog, which is how nearly every save in this app confirms itself, was painted
   behind that dialog and never seen. Pre-existing, not caused by the sidebar fix, but fixed with it:
   a toast is the one thing that must out-rank a modal. Above the help panel (10100) too. */
.rz-notification {
  z-index: 10200 !important;
  border-radius: var(--ck-radius-sm) !important;
  box-shadow: var(--ck-shadow-md) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
}

.rz-notification-title {
  font-weight: 700 !important;
}

.rz-notification.rz-success {
  border-left: 4px solid var(--ck-success) !important;
}

.rz-notification.rz-warning {
  border-left: 4px solid var(--ck-warning) !important;
}

.rz-notification.rz-error {
  border-left: 4px solid var(--ck-danger) !important;
}

.rz-notification.rz-info {
  border-left: 4px solid var(--ck-blue) !important;
}

/* -- Checkboxes & Radio -- */
.rz-chkbox-box.rz-state-active,
.rz-radiobutton-box.rz-state-active {
  background: var(--ck-blue) !important;
  border-color: var(--ck-blue) !important;
}

.rz-chkbox-box:hover,
.rz-radiobutton-box:hover {
  border-color: var(--ck-blue) !important;
}

/* -- Tooltip -- */
.rz-tooltip .rz-tooltip-text {
  background: var(--ck-sidebar-top) !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  border-radius: var(--ck-radius-xs) !important;
  padding: 6px 10px !important;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------
   13. FOOTER
   ---------------------------------------------------------------- */
.footer {
  background: transparent !important;
  border-top: 1px solid var(--ck-border) !important;
  padding: 16px 24px !important;
  margin-top: auto;
}

.footer .copyright {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ck-text-muted) !important;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------
   14. DROPDOWN MENUS (Bootstrap)
   ---------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-md) !important;
  box-shadow: var(--ck-shadow-md) !important;
  padding: 6px !important;
  min-width: 180px;
  background: var(--ck-surface) !important;
}

.dropdown-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ck-text);
  padding: 8px 12px;
  border-radius: var(--ck-radius-xs);
  transition: all var(--ck-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}

.dropdown-divider {
  border-color: var(--ck-border) !important;
}

/* ----------------------------------------------------------------
   15. MODALS (Bootstrap)
   ---------------------------------------------------------------- */
.modal-content {
  border-radius: var(--ck-radius-md) !important;
  border: 1px solid var(--ck-border) !important;
  box-shadow: var(--ck-shadow-xl) !important;
}

.modal-header {
  background: var(--ck-surface) !important;
  border-bottom: 1px solid var(--ck-border) !important;
  padding: 16px 20px !important;
}

.modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ck-text) !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 20px !important;
}

.modal-footer {
  background: var(--ck-surface-subtle) !important;
  border-top: 1px solid var(--ck-border) !important;
  padding: 12px 20px !important;
}

.btn-close {
  color: var(--ck-text-muted) !important;
}

/* ----------------------------------------------------------------
   16. ALERTS
   ---------------------------------------------------------------- */
.alert {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--ck-radius-sm) !important;
  padding: 12px 16px !important;
  border-left-width: 4px !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

.alert-info {
  background: var(--ck-blue-ghost) !important;
  border-left-color: var(--ck-blue) !important;
  color: var(--ck-blue-active) !important;
}

.alert-success {
  background: var(--ck-success-light) !important;
  border-left-color: var(--ck-success) !important;
  color: #1E8449 !important;
}

.alert-warning {
  background: var(--ck-warning-light) !important;
  border-left-color: var(--ck-warning) !important;
  color: #A04000 !important;
}

.alert-danger {
  background: var(--ck-danger-light) !important;
  border-left-color: var(--ck-danger) !important;
  color: #922B21 !important;
}

/* ----------------------------------------------------------------
   17. UTILITY OVERRIDES
   ---------------------------------------------------------------- */
.text-primary  { color: var(--ck-blue) !important; }
.text-muted    { color: var(--ck-text-muted) !important; }
.text-secondary { color: var(--ck-text-secondary) !important; }
.text-dark     { color: var(--ck-text) !important; }

.bg-primary    { background-color: var(--ck-blue) !important; }
.bg-light      { background-color: var(--ck-blue-ghost) !important; }

.border        { border-color: var(--ck-border) !important; }
.border-primary { border-color: var(--ck-blue) !important; }

/* ----------------------------------------------------------------
   18. BLAZOR ERROR UI
   ---------------------------------------------------------------- */
#blazor-error-ui {
  color-scheme: light only;
  background: var(--ck-warning-light);
  border-top: 3px solid var(--ck-warning);
  color: var(--ck-text);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}

/* ----------------------------------------------------------------
   19. SCROLLBAR (Chromium)
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ck-border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ck-blue-light);
}

/* ----------------------------------------------------------------
   20. LOADING / SPINNER
   ---------------------------------------------------------------- */
.loader {
  border-color: rgba(71, 190, 217, 0.15) !important;
  border-left-color: var(--ck-blue) !important;
}

/* ----------------------------------------------------------------
   21. NOW UI DASHBOARD SPECIFIC OVERRIDES
   ---------------------------------------------------------------- */

/* Kill the orange primary throughout Now UI Dashboard */
.now-ui-icons {
  color: var(--ck-text-secondary);
}

.sidebar .now-ui-icons {
  color: rgba(71, 190, 217, 0.65) !important;
}

/* Fix navbar toggler bars */
.navbar-toggler-bar {
  background: var(--ck-text-secondary) !important;
}

/* Fix the mini sidebar logo area */
.sidebar-mini .sidebar .logo .logo-normal {
  opacity: 0;
  overflow: hidden;
  width: 0;
}

/* ----------------------------------------------------------------
   22. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 991px) {
  .sidebar .logo img {
    width: 45%;
    height: auto;
    margin: 0 auto;
  }

  .content {
    padding: 16px 16px 32px !important;
  }
}

/* ----------------------------------------------------------------
   23. RADZEN COMPONENT OVERRIDES — design-system alignment
   ---------------------------------------------------------------- */

/* rz-card ------------------------------------------------------- */
.rz-card {
  background: var(--ck-surface) !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-md) !important;
  box-shadow: var(--ck-shadow-sm) !important;
  transition: box-shadow var(--ck-transition-md);
  overflow: hidden;
}
.rz-card:hover {
  box-shadow: var(--ck-shadow-md) !important;
}
.rz-card .rz-card-header,
.rz-card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ck-border) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ck-text) !important;
  letter-spacing: -0.01em;
}
.rz-card .rz-card-content,
.rz-card-content {
  padding: 16px 20px !important;
}

/* rz-badge ------------------------------------------------------ */
.rz-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  line-height: 1.5;
}
.rz-badge-primary,
.rz-badge-info {
  background: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}
.rz-badge-success {
  background: var(--ck-success-light) !important;
  color: var(--ck-success) !important;
}
.rz-badge-danger {
  background: var(--ck-danger-light) !important;
  color: var(--ck-danger) !important;
}
.rz-badge-warning {
  background: var(--ck-warning-light) !important;
  color: var(--ck-warning) !important;
}
.rz-badge-secondary,
.rz-badge-light {
  background: var(--ck-surface-subtle) !important;
  color: var(--ck-text-secondary) !important;
  border: 1px solid var(--ck-border) !important;
}

/* rz-button Light variant --------------------------------------- */
.rz-button.rz-light,
.rz-variant-outlined.rz-light .rz-button {
  background: var(--ck-surface) !important;
  border-color: var(--ck-border-strong) !important;
  color: var(--ck-text-secondary) !important;
  box-shadow: var(--ck-shadow-xs) !important;
}
.rz-button.rz-light:hover {
  background: var(--ck-blue-ghost) !important;
  border-color: var(--ck-blue-border) !important;
  color: var(--ck-blue-active) !important;
}

/* rz-fieldset --------------------------------------------------- */
.rz-fieldset {
  background: var(--ck-surface) !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-md) !important;
  box-shadow: var(--ck-shadow-xs) !important;
  padding: 0 !important;
}
.rz-fieldset-legend {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--ck-text-secondary) !important;
  background: var(--ck-surface) !important;
  padding: 0 8px !important;
}
.rz-fieldset-content {
  padding: 16px 20px !important;
}

/* rz-alert / rz-messages ---------------------------------------- */
.rz-alert,
.rz-messages .rz-message {
  border-radius: var(--ck-radius-sm) !important;
  border: 1px solid transparent !important;
  padding: 12px 16px !important;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rz-alert-info,
.rz-messages-info .rz-message,
.rz-message.rz-message-info {
  background: var(--ck-blue-ghost) !important;
  border-color: var(--ck-blue-border) !important;
  color: var(--ck-blue-active) !important;
}
.rz-alert-success,
.rz-messages-success .rz-message,
.rz-message.rz-message-success {
  background: var(--ck-success-light) !important;
  border-color: #A9DFBF !important;
  color: #1A7A40 !important;
}
.rz-alert-warning,
.rz-messages-warn .rz-message,
.rz-message.rz-message-warn {
  background: var(--ck-warning-light) !important;
  border-color: #FAD7A0 !important;
  color: #9A5208 !important;
}
.rz-alert-danger,
.rz-alert-error,
.rz-messages-error .rz-message,
.rz-message.rz-message-error {
  background: var(--ck-danger-light) !important;
  border-color: #F5B7B1 !important;
  color: #A93226 !important;
}

/* rz-splitter --------------------------------------------------- */
.rz-splitter {
  background: transparent !important;
  border: none !important;
}
.rz-splitter-handle {
  background: var(--ck-border) !important;
  transition: background var(--ck-transition);
}
.rz-splitter-handle:hover {
  background: var(--ck-blue-light) !important;
}

/* rz-panel (accordion) ------------------------------------------ */
.rz-panel {
  background: var(--ck-surface) !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-md) !important;
  box-shadow: var(--ck-shadow-xs) !important;
  overflow: hidden !important;
  margin-bottom: 8px;
}
.rz-panel-titlebar {
  background: var(--ck-surface-subtle) !important;
  border-bottom: 1px solid var(--ck-border) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ck-text) !important;
  cursor: pointer;
  transition: background var(--ck-transition);
}
.rz-panel-titlebar:hover {
  background: var(--ck-blue-ghost) !important;
}
.rz-panel-content {
  padding: 16px !important;
}

/* rz-listbox / rz-dropdown panel -------------------------------- */
.rz-listbox,
.rz-multiselect-panel,
.rz-dropdown-panel {
  background: var(--ck-surface) !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: var(--ck-radius-md) !important;
  box-shadow: var(--ck-shadow-lg) !important;
  overflow: hidden;
}
.rz-listbox-item,
.rz-dropdown-item,
.rz-multiselect-item {
  padding: 9px 14px !important;
  font-size: 13px !important;
  color: var(--ck-text) !important;
  transition: background var(--ck-transition);
}
.rz-listbox-item:hover,
.rz-dropdown-item:hover,
.rz-multiselect-item:hover {
  background: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}
.rz-state-highlight,
.rz-listbox-item.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight {
  background: var(--ck-blue) !important;
  color: #fff !important;
}

/* rz-progressbar ------------------------------------------------ */
.rz-progressbar {
  background: var(--ck-border) !important;
  border-radius: 999px !important;
  overflow: hidden;
  height: 8px !important;
}
.rz-progressbar-determinate,
.rz-progressbar-value {
  background: var(--ck-blue) !important;
  border-radius: 999px !important;
  height: 100%;
  transition: width 400ms ease;
}

/* Progress bar with its % label BESIDE it (to the right) rather than centred over the fill — so the
   label can never be vertically clipped on a thin bar nor render two-tone across the fill/track
   boundary. Single dark text colour, no shadow. Shared pattern (mirrors the dashboard grid fix);
   put the bar + a .ck-progress-pct span inside a .ck-progress-inline wrapper. */
.ck-progress-inline { display: flex; align-items: center; gap: 8px; }
.ck-progress-inline .rz-progressbar { flex: 1 1 auto; min-width: 0; }
.ck-progress-inline .ck-progress-pct {
  flex: 0 0 auto;
  color: var(--ck-text);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  text-shadow: none;
}

/* ----------------------------------------------------------------
   24. LOGIN SCREEN
   ---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   Chek button component (ck-btn) — used by the login / portal
   actions. Solid brand-blue primary with large variant.
   ---------------------------------------------------------------- */
.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--ck-radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ck-transition), border-color var(--ck-transition),
              color var(--ck-transition), box-shadow var(--ck-transition);
}

.ck-btn:disabled,
.ck-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.ck-btn--primary {
  background: var(--ck-blue);
  border-color: var(--ck-blue);
  color: #fff;
}

.ck-btn--primary:hover {
  background: var(--ck-blue-hover);
  border-color: var(--ck-blue-hover);
  color: #fff;
}

.ck-btn--primary:active {
  background: var(--ck-blue-active);
  border-color: var(--ck-blue-active);
}

.ck-btn--lg {
  font-size: 15px;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: var(--ck-radius-md);
}

.ck-login-bg {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ck-sidebar-top) 0%, var(--ck-sidebar-mid) 50%, var(--ck-sidebar-bot) 100%);
  position: relative;
  overflow: hidden;
}

.ck-login-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ck-login-glow-tr {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(71, 190, 217, 0.18), transparent 70%);
  top: -160px;
  right: -120px;
}

.ck-login-glow-bl {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(71, 190, 217, 0.12), transparent 70%);
  bottom: -140px;
  left: -100px;
}

.ck-login-card {
  position: relative;
  width: 380px;
  background: #fff;
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-xl);
  padding: 32px 32px 28px;
}

.ck-login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.ck-login-logo img {
  height: 64px;
}

.ck-login-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ck-text) !important;
  text-align: center;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em;
}

.ck-login-subtitle {
  font-size: 13px;
  color: var(--ck-text-muted);
  text-align: center;
  margin: 0 0 22px !important;
}

.ck-login-field {
  margin-bottom: 14px;
}

.ck-login-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-secondary);
  margin-bottom: 5px;
}

.ck-login-field .ck-input {
  width: 100%;
}

/* Show / hide password. Generic on purpose — the sign-in field is the first user, but the register,
   invite and reset screens have the same problem and can adopt it by wrapping their field the same way.
   Behaviour lives in chek-app.js (ckReveal); see the markup contract documented there. */
.ck-input-reveal {
  position: relative;
  display: block;
}

.ck-input-reveal .ck-input {
  width: 100%;
  /* Room for the button, so a long password never runs underneath it. */
  padding-right: 44px;
}

.ck-input-reveal-btn {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--ck-radius-sm);
  background: transparent;
  color: var(--ck-text-muted);
  cursor: pointer;
  transition: color var(--ck-transition), background var(--ck-transition);
}

.ck-input-reveal-btn:hover {
  color: var(--ck-blue);
  background: var(--ck-blue-ghost);
}

.ck-input-reveal-btn:focus-visible {
  outline: 2px solid var(--ck-blue);
  outline-offset: 1px;
}

.ck-input-reveal-btn.is-revealed {
  color: var(--ck-blue);
}

.ck-input-reveal-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Two icons, one shown at a time. Swapping by class keeps the script free of markup building. */
.ck-input-reveal-btn .ck-reveal-off { display: none; }
.ck-input-reveal-btn.is-revealed .ck-reveal-on { display: none; }
.ck-input-reveal-btn.is-revealed .ck-reveal-off { display: block; }

.ck-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ck-login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ck-text);
  cursor: pointer;
  user-select: none;
}

.ck-login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ck-blue);
  cursor: pointer;
}

.ck-login-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--ck-blue);
  text-decoration: none;
  transition: color var(--ck-transition);
}

.ck-login-link:hover {
  color: var(--ck-blue-hover);
}

.ck-login-submit {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}

.ck-login-error {
  background: var(--ck-danger-light);
  border: 1px solid #F5B7B1;
  border-radius: var(--ck-radius-sm);
  color: #A93226;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.ck-login-warning {
  background: #FEF8E7;
  border: 1px solid #F4D58A;
  border-radius: var(--ck-radius-sm);
  color: #8A6100;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.ck-login-footer {
  border-top: 1px solid var(--ck-border);
  margin-top: 22px;
  padding-top: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ck-login-footer span {
  font-size: 12px;
  color: var(--ck-text-muted);
}

.ck-field-error {
  display: block;
  font-size: 12px;
  color: #A93226;
  margin-top: 4px;
}

/* -- Drag-and-drop image upload (profile photo / practice logo) -- */
.ck-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  padding: 16px;
  border: 2px dashed var(--ck-border, #cdd9e0);
  border-radius: 10px;
  background: var(--ck-surface-subtle, #f7fafc);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ck-dropzone:hover { border-color: var(--ck-blue, #47BED9); }
.ck-dropzone.is-dragging {
  border-color: var(--ck-blue, #47BED9);
  background: var(--ck-blue-ghost, #e7f1ff);
}
.ck-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.ck-dropzone-preview { max-height: 96px; max-width: 240px; object-fit: contain; }
.ck-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ck-text-muted, #6c757d);
  pointer-events: none;
}
.ck-dropzone-title { font-weight: 600; color: var(--ck-text, #1f2d3d); }
.ck-dropzone-hint { font-size: 12px; }
.ck-dropzone-busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .6);
  border-radius: 10px;
}

/* A tidy standard-reference pill (e.g. "ASQM 1 (2022)") shown beside a section heading. */
.ck-standard-pill {
  display: inline-flex;
  align-items: center;
  background: var(--ck-blue-ghost, #e7f1ff);
  color: var(--ck-blue-active, #1a3a6e);
  border: 1px solid var(--ck-border, #d7e2e8);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   Firm sign-up (register) — a wider variant of the login card with
   grouped sections for firm, admin and payment details.
   ---------------------------------------------------------------- */
.ck-register-card {
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.ck-register-section {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text);
  border-bottom: 1px solid var(--ck-border);
  padding-bottom: 6px;
  margin: 20px 0 12px;
}

.ck-register-section:first-of-type {
  margin-top: 4px;
}

.ck-register-hint {
  font-size: 12px;
  color: var(--ck-text-muted);
  margin: -4px 0 12px;
}

.ck-register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

.ck-register-grid-3 {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 0 14px;
}

@media (max-width: 480px) {
  .ck-register-grid-3 {
    grid-template-columns: 1fr;
  }
}

.ck-register-optional {
  color: var(--ck-text-muted);
  font-weight: 400;
}

.ck-register-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #A35200;
  background: #FCEEDB;
  border-radius: var(--ck-radius-sm);
  padding: 1px 6px;
  margin-right: 4px;
}

/* ----------------------------------------------------------------
   25. TOP BAR (app shell header)
   Fixed 60px white bar: page title on the left, tenant chip and
   user menu on the right. Replaces the Now UI absolute navbar.
   ---------------------------------------------------------------- */
.ck-topbar {
  position: sticky;
  top: 0;
  z-index: 1029;
  height: 60px;
  min-height: 60px;
  background: var(--ck-surface);
  border-bottom: 1px solid var(--ck-border);
  box-shadow: var(--ck-shadow-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
}

.ck-topbar-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ck-topbar-crumb {
  font-size: 13px;
  font-weight: 500;
  color: var(--ck-text-muted);
  white-space: nowrap;
}

.ck-topbar-crumb .ck-topbar-crumb-sep {
  margin: 0 4px;
}

.ck-topbar-crumb-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ck-transition);
}

.ck-topbar-crumb-link:hover,
.ck-topbar-crumb-link:focus {
  color: var(--ck-blue);
  text-decoration: underline;
}

.ck-topbar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ck-topbar-tenant {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-secondary);
  background: var(--ck-surface-subtle);
  border: 1px solid var(--ck-border);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.ck-topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ck-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: var(--ck-radius-sm);
  transition: all var(--ck-transition);
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  max-width: 240px;
}

.ck-topbar-user:hover {
  background: var(--ck-blue-ghost);
  color: var(--ck-blue-active);
}

.ck-topbar-user > i {
  font-size: 17px;
  color: var(--ck-blue);
}

.ck-topbar-user .ck-topbar-username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-topbar .dropdown-item i {
  width: 16px;
  text-align: center;
  margin-right: 8px;
  color: var(--ck-text-muted);
  font-size: 12px;
}

.ck-topbar .dropdown-item:hover i {
  color: var(--ck-blue-active);
}

/* Mobile sidebar toggle (hidden on desktop) */
.ck-topbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-surface);
  color: var(--ck-text-secondary);
  cursor: pointer;
  transition: all var(--ck-transition);
  flex-shrink: 0;
}

.ck-topbar-toggle:hover {
  background: var(--ck-blue-ghost);
  color: var(--ck-blue-active);
  border-color: var(--ck-blue-border);
}

@media (max-width: 991px) {
  .ck-topbar {
    padding: 0 16px;
  }

  .ck-topbar-toggle {
    display: inline-flex;
  }

  .ck-topbar-tenant {
    display: none;
  }

  .ck-topbar-user .ck-topbar-username {
    display: none;
  }
}

/* ----------------------------------------------------------------
   26. STAT / KPI CARDS (design-system StatCard)
   Large tinted icon, 26px number, uppercase micro-label.
   ---------------------------------------------------------------- */
.ck-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 1199px) {
  .ck-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .ck-stat-grid {
    grid-template-columns: 1fr;
  }
}

.ck-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-sm);
  padding: 18px 20px;
  transition: box-shadow var(--ck-transition-md), transform var(--ck-transition-md);
}

.ck-stat-card.is-clickable {
  cursor: pointer;
}

.ck-stat-card.is-clickable:hover {
  box-shadow: var(--ck-shadow-md);
  transform: translateY(-2px);
}

.ck-stat-icon {
  display: flex;
  font-size: 34px;
  line-height: 1;
  color: var(--ck-blue);
  flex-shrink: 0;
}

/* RadzenIcon inside a stat card inherits the tone color and size */
.ck-stat-icon .rzi,
.ck-stat-icon .rz-icon {
  font-size: inherit !important;
  color: inherit !important;
}

.ck-stat-card--success .ck-stat-icon { color: var(--ck-success); }
.ck-stat-card--warning .ck-stat-icon { color: var(--ck-warning); }
.ck-stat-card--danger  .ck-stat-icon { color: var(--ck-danger); }
.ck-stat-card--info    .ck-stat-icon { color: var(--ck-blue); }

.ck-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ck-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-muted);
  margin-top: 3px;
}

/* ----------------------------------------------------------------
   27. PAGE HEADERS
   In-content header row: title (+ subtitle) left, actions right.
   Used where a page needs context beyond the top-bar title.
   ---------------------------------------------------------------- */
.ck-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ck-page-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ck-page-head-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.ck-page-head-subtitle {
  font-size: 13px;
  color: var(--ck-text-muted);
  margin: 1px 0 0;
}

/* The firm's job number, shown beside the engagement name. Deliberately quieter and lighter than the
   title: it is an identifier you scan for, not the thing you are reading. Mono so digit groups line up
   between one engagement and the next. */
/* Same identifier, in a grid cell. */
.ck-grid-ref {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ck-text-secondary);
  white-space: nowrap;
}

.ck-page-head-ref {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62em;
  font-weight: 500;
  color: var(--ck-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ck-page-head .ck-status-icon {
  font-size: 28px;
  line-height: 1;
  display: flex;
  flex-shrink: 0;
}

.ck-page-head .ck-status-icon .rzi,
.ck-page-head .ck-status-icon .rz-icon {
  font-size: inherit !important;
}

/* ============================================================================
   CHEK SUPPORT PORTAL (/chekadmin) + IMPERSONATION BANNER
   ============================================================================ */

.ck-admin-shell {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ck-page-bg);
}

.ck-admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 60px;
  background: linear-gradient(90deg, var(--ck-sidebar-top), var(--ck-sidebar-bot));
  color: var(--ck-text-inverse);
  box-shadow: var(--ck-shadow-sm);
}

.ck-admin-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}

.ck-admin-brand .rz-icon,
.ck-admin-brand .rzi {
  color: var(--ck-blue-light);
}

.ck-admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ck-admin-whoami {
  font-size: 0.85rem;
  opacity: 0.85;
}

.ck-admin-body {
  flex: 1;
  padding: 1.5rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Impersonation banner — always visible at the very top while in a support session */
.ck-impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.55rem 1.25rem;
  background: repeating-linear-gradient(
      45deg,
      var(--ck-warning),
      var(--ck-warning) 18px,
      #d9731c 18px,
      #d9731c 36px);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--ck-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1080;
}

.ck-impersonation-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.ck-impersonation-text strong {
  text-decoration: underline;
}

.ck-impersonation-exit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: var(--ck-radius-sm);
  padding: 0.35rem 0.85rem;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--ck-transition);
}

.ck-impersonation-exit:hover {
  background: rgba(0, 0, 0, 0.45);
}

/* ============================================================================
   ENGAGEMENT SUMMARY — details fieldset + KPI cards layout
   ============================================================================ */

/* Make the details fieldset span the row so the KPI cards drop onto their own
   full-width line below it instead of crowding to one side. */
.ck-engagement-fieldset {
  flex-basis: 100%;
  width: 100%;
}

/* KPI cards: a spaced, equal-width responsive grid rather than flush-joined cards. */
.ck-kpi-group {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
}

.ck-kpi-group > .rz-card {
  flex: 1 1 200px;
  min-width: 190px;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-xs);
  /* One consistent internal layout for every card: label on top, value (and any sub-lines) stacked
     below at full width, so nothing is forced into a cramped side-by-side slot or clipped. */
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Shared KPI card content classes — same label/value treatment in every card. */
.ck-kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ck-text-muted, #6c757d);
  line-height: 1.3;
}
.ck-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ck-text, #1a2b33);
  line-height: 1.3;
  overflow-wrap: anywhere;   /* long values (dates, "🇦🇺 Australia") wrap rather than clip */
}
.ck-kpi-sub {
  font-size: 12.5px;
  color: var(--ck-text-secondary, #6c757d);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------
   Two-factor authentication — setup wizard, management hub and the
   login challenge screens. Reuses the login card tokens where it can.
   ---------------------------------------------------------------- */
.ck-2fa-dialog {
  max-width: 560px;
}

/* Step progress dots across the top of the setup wizard. */
.ck-2fa-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.ck-2fa-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--ck-page-bg);
  color: var(--ck-text-muted);
  border: 1px solid var(--ck-border);
}

.ck-2fa-step-dot.is-active {
  background: var(--ck-blue);
  border-color: var(--ck-blue);
  color: #fff;
}

.ck-2fa-step-dot.is-done {
  background: var(--ck-success);
  border-color: var(--ck-success);
  color: #fff;
}

.ck-2fa-step-line {
  width: 26px;
  height: 2px;
  background: var(--ck-border);
}

.ck-2fa-heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--ck-text);
  margin: 0 0 8px;
  text-align: center;
}

.ck-2fa-text {
  font-size: 13px;
  color: var(--ck-text-secondary);
  line-height: 1.5;
  margin: 0 0 14px;
}

/* QR code + manual key. */
.ck-2fa-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ck-2fa-qr img {
  width: 200px;
  height: 200px;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  padding: 8px;
  background: #fff;
}

.ck-2fa-key {
  font-family: monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  background: var(--ck-blue-ghost);
  border: 1px solid var(--ck-blue-border);
  color: var(--ck-blue-active);
  border-radius: var(--ck-radius-sm);
  padding: 8px 14px;
  user-select: all;
}

.ck-2fa-apps {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ck-2fa-apps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ck-text-secondary);
}

/* OTP code entry. */
.ck-2fa-otp {
  width: 100%;
  text-align: center;
  font-size: 26px;
  letter-spacing: 0.4em;
  font-family: monospace;
  padding: 12px;
  border: 1px solid var(--ck-border-strong);
  border-radius: var(--ck-radius-md);
}

.ck-2fa-otp:focus {
  outline: none;
  border-color: var(--ck-blue);
  box-shadow: 0 0 0 3px var(--ck-blue-ghost);
}

/* Recovery code grid + warning banner. */
.ck-2fa-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--ck-page-bg);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  padding: 14px;
  margin: 4px 0 12px;
}

.ck-2fa-codes code {
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ck-text);
  text-align: center;
}

.ck-2fa-warning {
  background: var(--ck-warning-light);
  border: 1px solid #F1C40F;
  color: #9C6A0E;
  border-radius: var(--ck-radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.ck-2fa-success-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ck-success-light);
  border: 1px solid #A9DFBF;
  color: #1E8449;
  border-radius: var(--ck-radius-md);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* =====================================================================================
   SESSIONS & LOGIN HISTORY  (Active Sessions / Login History settings sub-pages)
   ===================================================================================== */

.ck-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ck-blue);
  text-decoration: none;
  margin-bottom: 8px;
}
.ck-back-link:hover { color: var(--ck-blue-hover); }
.ck-back-link .rzi { font-size: 16px; }

.ck-page-subtitle {
  margin: 4px 0 0;
  color: var(--ck-text-muted);
  font-size: 14px;
  max-width: 760px;
}

.ck-history-filterbar {
  background: var(--ck-surface-subtle);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  padding: 14px 16px;
}

.ck-history-detail {
  background: var(--ck-surface-subtle);
  border-left: 3px solid var(--ck-blue);
  padding: 12px 16px;
  font-size: 13px;
}

/* Stack the session card content on narrow screens so nothing overflows on mobile. */
@media (max-width: 575px) {
  .ck-history-filterbar { padding: 12px; }
}

/* ============================================================================
   NOTIFICATIONS — preferences table + bell dropdown panel
   ============================================================================ */
.ck-notif-prefs { width: 100%; border-collapse: collapse; }
.ck-notif-prefs th { font-size: 12px; font-weight: 600; color: var(--ck-text-secondary); padding: 6px 8px; border-bottom: 1px solid var(--ck-border); }
.ck-notif-prefs td { padding: 10px 8px; border-bottom: 1px solid var(--ck-border); font-size: 14px; color: var(--ck-text); vertical-align: middle; }
.ck-notif-prefs tr:last-child td { border-bottom: 0; }

/* Bell dropdown panel anchored under the top-bar bell. */
.ck-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: 92vw;
  background: var(--ck-surface); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-lg); z-index: 1050; overflow: hidden;
}
.ck-notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--ck-border);
}
.ck-notif-panel-head strong { font-size: 14px; color: var(--ck-text); }
.ck-notif-panel-list { max-height: 420px; overflow-y: auto; }
.ck-notif-item {
  display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ck-border);
  cursor: pointer; text-decoration: none; color: inherit; background: transparent; width: 100%; text-align: left;
  border-left: 3px solid transparent;
}
.ck-notif-item:hover { background: var(--ck-blue-ghost); }
.ck-notif-item.is-unread { border-left-color: var(--ck-blue); background: var(--ck-surface-subtle); }
.ck-notif-item .ck-notif-icon { color: var(--ck-blue); font-size: 18px; margin-top: 2px; }
.ck-notif-item .ck-notif-body { min-width: 0; flex: 1; }
.ck-notif-item .ck-notif-title { font-size: 13px; font-weight: 600; color: var(--ck-text); margin: 0 0 2px; }
.ck-notif-item .ck-notif-msg { font-size: 13px; color: var(--ck-text-secondary); margin: 0; line-height: 1.35; }
.ck-notif-item .ck-notif-time { font-size: 11px; color: var(--ck-text-muted); margin-top: 4px; }
.ck-notif-item .ck-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ck-blue); margin-top: 6px; flex: none; }
.ck-notif-panel-foot { padding: 10px 14px; text-align: center; border-top: 1px solid var(--ck-border); }
.ck-notif-panel-empty { padding: 28px 14px; text-align: center; color: var(--ck-text-muted); font-size: 13px; }

/* The .ck-help-search-* popover (the ? that sat in the top bar beside the bell) was removed when help
   articles became a source inside the Ctrl-K palette — see .ck-palette-*. Nothing renders those classes
   any more, so the rules went with the markup. Not to be confused with .ck-help-searchbar below, which is
   the Help home page's own search field, or .ck-help-panel, the contextual [?] slide-in that remains. */

/* ============================================================================
   DARK THEME
   Toggled by data-theme="dark" on <html> (set by chekApplyTheme in App.razor;
   "system" resolves to light/dark from the OS). We override the --ck-* design
   tokens; because the --rz-* Radzen tokens are declared as var(--ck-*) in :root,
   those re-resolve to the dark values automatically. A handful of surfaces that
   hardcode white (body, .card, top bar) get explicit dark overrides too.
   The sidebar is already deep navy, so it is intentionally left as-is.
   ============================================================================ */
:root[data-theme="dark"] {
  --ck-page-bg:        #0B1620;
  --ck-surface:        #13242E;
  --ck-surface-subtle: #182C37;

  --ck-border:         #294049;
  --ck-border-strong:  #38545F;

  --ck-text:           #E7EEF2;
  --ck-text-secondary: #ABC1CC;
  --ck-text-muted:     #7E97A2;

  --ck-success-light:  #16352A;
  --ck-warning-light:  #3A2C1B;
  --ck-danger-light:   #3A2220;
  --ck-blue-ghost:     #14333E;

  /* Radzen surface tokens that are NOT declared via var(--ck-*) in :root. */
  --rz-base-background-color:      var(--ck-surface);
  --rz-content-background-color:   var(--ck-surface);
  --rz-panel-background-color:     var(--ck-surface);
  --rz-input-background-color:     var(--ck-surface-subtle);
  --rz-secondary-background-color: var(--ck-page-bg);
  --rz-series-1: var(--ck-blue);
}

/* Hardcoded-white chrome surfaces. */
:root[data-theme="dark"] body { background: var(--ck-page-bg); color: var(--ck-text); }
:root[data-theme="dark"] .main-panel,
:root[data-theme="dark"] .content { background: var(--ck-page-bg); }
:root[data-theme="dark"] .card { background: var(--ck-surface); color: var(--ck-text); box-shadow: var(--ck-shadow-sm); }
:root[data-theme="dark"] .card .card-header,
:root[data-theme="dark"] .card .title { color: var(--ck-text); }
:root[data-theme="dark"] .ck-topbar { background: var(--ck-surface); border-bottom-color: var(--ck-border); }
:root[data-theme="dark"] .ck-topbar-title,
:root[data-theme="dark"] .ck-topbar-crumb { color: var(--ck-text); }

/* Radzen cards/datagrids/dialogs read the tokens above, but a few use literal #fff. */
:root[data-theme="dark"] .rz-card,
:root[data-theme="dark"] .rz-datatable,
:root[data-theme="dark"] .rz-grid-table,
:root[data-theme="dark"] .rz-dialog,
:root[data-theme="dark"] .rz-dropdown,
:root[data-theme="dark"] .rz-dropdown-panel { background-color: var(--ck-surface); color: var(--ck-text); }
:root[data-theme="dark"] .rz-datatable th,
:root[data-theme="dark"] .rz-grid-table th { background-color: var(--ck-surface-subtle); color: var(--ck-text-secondary); }

/* Appearance dialog — live theme preview thumbnail. */
.ck-theme-thumb { width: 96px; height: 60px; border-radius: 8px; border: 1px solid var(--ck-border); display: flex; overflow: hidden; box-shadow: var(--ck-shadow-xs); }
.ck-theme-thumb-side { width: 26px; background: linear-gradient(180deg, #0B2736, #104258); }
.ck-theme-thumb-main { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.ck-theme-thumb-bar { display: block; height: 8px; border-radius: 3px; }
.ck-theme-thumb-card { display: block; flex: 1; border-radius: 4px; }
.ck-theme-thumb.is-light .ck-theme-thumb-main { background: #F2F6F9; }
.ck-theme-thumb.is-light .ck-theme-thumb-bar { background: #ffffff; }
.ck-theme-thumb.is-light .ck-theme-thumb-card { background: #ffffff; border: 1px solid #e6eef2; }
.ck-theme-thumb.is-dark .ck-theme-thumb-main { background: #0B1620; }
.ck-theme-thumb.is-dark .ck-theme-thumb-bar { background: #13242E; }
.ck-theme-thumb.is-dark .ck-theme-thumb-card { background: #13242E; border: 1px solid #294049; }
.ck-theme-thumb.is-system .ck-theme-thumb-main { background: linear-gradient(135deg, #F2F6F9 50%, #0B1620 50%); }
.ck-theme-thumb.is-system .ck-theme-thumb-bar { background: linear-gradient(135deg, #ffffff 50%, #13242E 50%); }
.ck-theme-thumb.is-system .ck-theme-thumb-card { background: linear-gradient(135deg, #ffffff 50%, #13242E 50%); }

/* ============================================================================
   SUBSCRIPTION & BILLING
   ============================================================================ */
.ck-sub-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 10px 16px; border-radius: var(--ck-radius-sm); margin-bottom: 1rem;
  font-size: 14px; flex-wrap: wrap;
}
.ck-sub-banner-text { flex: 1; min-width: 220px; }
.ck-sub-banner--info { background: var(--ck-blue-ghost); color: var(--ck-text); border: 1px solid var(--ck-blue-border); }
.ck-sub-banner--danger { background: var(--ck-danger-light); color: var(--ck-danger); border: 1px solid var(--ck-danger); }
.ck-sub-banner--danger strong { color: var(--ck-danger); }

/* Plan cards */
.ck-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { .ck-plan-grid { grid-template-columns: 1fr; } }
.ck-plan-card {
  position: relative; background: var(--ck-surface); border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md); padding: 1.5rem; display: flex; flex-direction: column;
  box-shadow: var(--ck-shadow-xs);
}
.ck-plan-card.is-popular { border-color: var(--ck-blue); box-shadow: var(--ck-shadow-md); }
.ck-plan-card.is-current { outline: 2px solid var(--ck-success); }
.ck-plan-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--ck-blue); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px; letter-spacing: .3px;
}
.ck-plan-name { font-size: 18px; font-weight: 700; color: var(--ck-text); margin: 0 0 2px; }
.ck-plan-tagline { font-size: 12.5px; color: var(--ck-text-muted); margin: 0 0 12px; min-height: 32px; }
.ck-plan-price { font-size: 30px; font-weight: 800; color: var(--ck-text); line-height: 1; }
.ck-plan-price small { font-size: 13px; font-weight: 500; color: var(--ck-text-secondary); }
.ck-plan-sub { font-size: 12px; color: var(--ck-text-muted); margin: 4px 0 14px; min-height: 18px; }
.ck-plan-feats { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; }
.ck-plan-feats li { font-size: 13px; color: var(--ck-text-secondary); padding: 4px 0 4px 22px; position: relative; }
.ck-plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--ck-success); font-weight: 700; }

/* Summary metric rows on /subscription */
.ck-metric-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ck-border); font-size: 14px; }
.ck-metric-row:last-child { border-bottom: 0; }
.ck-metric-row .ck-metric-label { color: var(--ck-text-secondary); }
.ck-metric-row .ck-metric-value { font-weight: 600; color: var(--ck-text); }

/* P8-S1 Document Intelligence — evidence upload/extraction */
.ck-evi-drop { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px dashed var(--ck-border); border-radius: 8px; cursor: pointer; color: var(--ck-text-secondary); font-size: 13px; background: #fafcfd; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.ck-evi-drop:hover { border-color: var(--ck-blue, #47BED9); color: var(--ck-blue, #47BED9); }
.ck-evi-drop.is-dragging { border-color: var(--ck-blue, #47BED9); background: var(--ck-blue-ghost, #e7f1ff); color: var(--ck-blue, #47BED9); }
.ck-evi-extract { border-left: 3px solid var(--ck-blue, #47BED9); background: #f6fcfe; padding: 8px 12px; border-radius: 0 6px 6px 0; }
.ck-evi-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.ck-evi-table td { padding: 3px 8px; vertical-align: top; border-bottom: 1px solid #eef3f5; }
.ck-evi-table .ck-evi-k { color: var(--ck-text-secondary); white-space: nowrap; width: 45%; }
.ck-evi-table .ck-evi-v { font-weight: 600; color: var(--ck-text); }

/* ===================== Help centre ===================== */
.ck-help-wrap { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.ck-help-hero { text-align: center; padding: 1.5rem 0 1.25rem; }
.ck-help-hero h1 { font-size: 1.9rem; font-weight: 700; color: var(--ck-text, #1a2b33); margin: 0 0 .4rem; }
.ck-help-hero p { color: var(--ck-text-secondary, #6c757d); margin: 0 0 1.1rem; }
.ck-help-searchbar { position: relative; max-width: 640px; margin: 0 auto; }
.ck-help-searchbar i.fa-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9aa7ad; }
.ck-help-searchbar input { width: 100%; padding: .85rem 2.6rem; border: 1.5px solid #d7e2e8; border-radius: 30px; font-size: 1rem; outline: none; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ck-help-searchbar input:focus { border-color: var(--ck-blue, #47BED9); }
.ck-help-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9aa7ad; cursor: pointer; }
.ck-help-section { font-size: 1.15rem; font-weight: 700; color: var(--ck-text, #1a2b33); margin: 2rem 0 .9rem; }
.ck-help-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.ck-help-card { background: #fff; border: 1px solid #e6ecf0; border-radius: 12px; padding: 1.1rem; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; }
.ck-help-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); border-color: var(--ck-blue, #47BED9); }
.ck-help-card--feature { border-top: 3px solid var(--ck-blue, #47BED9); }
.ck-help-card-icon { width: 42px; height: 42px; border-radius: 10px; background: #eef8fc; color: var(--ck-blue, #2DADC9); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: .6rem; }
.ck-help-card-title { font-weight: 600; color: var(--ck-text, #1a2b33); margin-bottom: .25rem; }
.ck-help-card-excerpt { font-size: .85rem; color: var(--ck-text-secondary, #6c757d); line-height: 1.4; }
.ck-help-card-count { font-size: .8rem; color: #9aa7ad; }
.ck-help-list { display: flex; flex-direction: column; gap: .35rem; }
.ck-help-listrow { display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem; background: #fff; border: 1px solid #eef2f5; border-radius: 8px; cursor: pointer; }
.ck-help-listrow:hover { border-color: var(--ck-blue, #47BED9); }
.ck-help-listrow i { color: var(--ck-blue, #2DADC9); }
.ck-help-listtitle { font-weight: 500; color: var(--ck-text, #1a2b33); flex: 1; }
.ck-help-listcat { font-size: .78rem; color: #9aa7ad; }
.ck-help-results { margin-top: 1rem; }
.ck-help-resultcount { color: var(--ck-text-secondary, #6c757d); margin-bottom: .75rem; font-size: .9rem; }
.ck-help-resultrow { padding: .8rem 0; border-bottom: 1px solid #eef2f5; cursor: pointer; }
.ck-help-resultmain { display: flex; align-items: center; gap: .6rem; }
.ck-help-resulttitle { font-weight: 600; color: var(--ck-blue, #2DADC9); }
.ck-help-catbadge { font-size: .72rem; background: #eef8fc; color: #2a6b7a; border-radius: 12px; padding: 1px 9px; }
.ck-help-resultexcerpt { font-size: .85rem; color: var(--ck-text-secondary, #6c757d); margin-top: .2rem; line-height: 1.4; }
.ck-help-resultexcerpt mark { background: #fff3b0; padding: 0 1px; }
.ck-help-empty { color: var(--ck-text-secondary, #6c757d); padding: 1.5rem 0; }
.ck-help-breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: #9aa7ad; margin-bottom: 1rem; }
.ck-help-breadcrumb a { color: var(--ck-blue, #2DADC9); text-decoration: none; }
.ck-help-cathead { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.ck-help-cathead h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.ck-help-articlelist { display: flex; flex-direction: column; gap: .5rem; }
.ck-help-articlerow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; background: #fff; border: 1px solid #e6ecf0; border-radius: 10px; cursor: pointer; }
.ck-help-articlerow:hover { border-color: var(--ck-blue, #47BED9); }
.ck-help-articletitle { font-weight: 600; color: var(--ck-text, #1a2b33); }
.ck-help-articleexcerpt { font-size: .85rem; color: var(--ck-text-secondary, #6c757d); margin-top: .15rem; }
.ck-help-articlewrap { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: start; }
.ck-help-articlebody { min-width: 0; }
.ck-help-articlebody h1 { font-size: 1.85rem; font-weight: 700; margin: 0 0 .35rem; }
.ck-help-articlemeta { color: #9aa7ad; font-size: .82rem; margin-bottom: 1.25rem; }
.ck-help-content { color: #2a3a42; line-height: 1.65; font-size: .95rem; }
.ck-help-content h2 { font-size: 1.3rem; font-weight: 700; margin: 1.6rem 0 .6rem; color: var(--ck-text, #1a2b33); scroll-margin-top: 80px; }
.ck-help-content h3 { font-size: 1.08rem; font-weight: 600; margin: 1.2rem 0 .4rem; scroll-margin-top: 80px; }
.ck-help-content p { margin: .6rem 0; }
.ck-help-content ul, .ck-help-content ol { margin: .6rem 0; padding-left: 1.4rem; }
.ck-help-content li { margin: .25rem 0; }
.ck-help-content code { background: #f0f3f5; padding: .05rem .35rem; border-radius: 4px; font-size: .88em; }
.ck-help-content table { border-collapse: collapse; width: 100%; margin: .8rem 0; }
.ck-help-content th, .ck-help-content td { border: 1px solid #d7e2e8; padding: .45rem .6rem; text-align: left; }
.ck-help-content th { background: #eef9fc; }

/* Auto-linked navigation destinations inside help content (e.g. a bold **Administration → Templates**). Reads
   as a bold link so it is clearly clickable — "go here next" — while ordinary bold emphasis stays plain. */
.ck-help-navlink { text-decoration: none; color: var(--ck-blue, #47BED9); }
.ck-help-navlink:hover { text-decoration: underline; }
.ck-help-navlink strong { color: inherit; }
.ck-help-content a { color: var(--ck-blue, #2DADC9); }
.ck-help-sidebar { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 1.25rem; }
.ck-help-toc, .ck-help-related { background: #f8fbfd; border: 1px solid #eef2f5; border-radius: 10px; padding: .9rem 1rem; }
.ck-help-toc-title { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; margin-bottom: .5rem; }
.ck-help-toc ul, .ck-help-related ul { list-style: none; margin: 0; padding: 0; }
.ck-help-toc li { margin: .3rem 0; font-size: .85rem; }
.ck-help-toc li.ck-help-toc-sub { padding-left: .9rem; }
.ck-help-toc a, .ck-help-related a { color: #3a6b7a; text-decoration: none; }
.ck-help-toc a:hover, .ck-help-related a:hover { color: var(--ck-blue, #2DADC9); }
.ck-help-related li { margin: .4rem 0; font-size: .85rem; }
.ck-help-feedback { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #eef2f5; }
.ck-help-feedback-q { font-weight: 600; margin-bottom: .6rem; }
.ck-help-feedback-btns { display: flex; gap: .5rem; }
.ck-help-feedback-box { margin-top: .8rem; }
.ck-help-feedback-thanks { color: #198754; font-weight: 600; }
@media (max-width: 820px) { .ck-help-articlewrap { grid-template-columns: 1fr; } .ck-help-sidebar { position: static; } }

/* Context-help [?] button + slide-in panel */
/* position:static keeps the button in normal inline flow next to its section header — never
   positioned against the viewport — so it can't bleed into the sidebar when the sidebar collapses. */
/* Small 18px inline question-mark, sized to sit beside a section heading. position:static + flex:0 0 auto
   are forced so the button always stays in normal inline flow next to its heading text — it can never be
   positioned against the viewport (no float to the top-left of the content) nor stretched by a flex header. */
.ck-help-btn { position: static !important; flex: 0 0 auto; background: transparent; border: 1px solid #cfe0e7; color: #6c8a96; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; font-size: .62rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: .3rem; vertical-align: middle; }
.ck-help-btn:hover { background: var(--ck-blue, #47BED9); color: #fff; border-color: var(--ck-blue, #47BED9); }
/* The help centre itself never shows a context-help [?] button — it would be redundant. Every /help/*
   page wraps its content in .ck-help-wrap, so hide any help button that lands inside one. */
.ck-help-wrap .ck-help-btn { display: none !important; }
/* Same z-index rule as the Radzen dialog layer above: these must clear .sidebar (9999), or the full-viewport
   backdrop covers the nav geometrically but paints under it — leaving the sidebar undimmed and clickable
   "through" the panel. Kept ABOVE the dialog layer (10000/10001), preserving the prior relative order
   (help 1190/1200 was already above dialogs 1099/1100) so a help panel opened over a dialog still wins. */
.ck-help-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 10090; }
.ck-help-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: #fff; z-index: 10100; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.18); animation: ckHelpSlide .18s ease-out; }
@keyframes ckHelpSlide { from { transform: translateX(40px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.ck-help-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; background: var(--ck-blue, #47BED9); color: #fff; }
.ck-help-panel-title { font-weight: 700; font-size: .98rem; }
.ck-help-panel-iconbtn { background: transparent; border: none; color: #fff; cursor: pointer; padding: .3rem .45rem; border-radius: 6px; font-size: .95rem; }
.ck-help-panel-iconbtn:hover { background: rgba(255,255,255,.18); }
.ck-help-panel-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem; }
.ck-help-panel-body .ck-help-content { font-size: .9rem; }
.ck-help-panel-foot { border-top: 1px solid #eef2f5; padding: .7rem 1.25rem; }


/* Command palette (Ctrl-K). Above the help panel layer for the same reason it is above .sidebar:
   a full-viewport backdrop that paints under the nav leaves the nav clickable "through" it. */
.ck-palette-backdrop { position: fixed; inset: 0; background: rgba(11,39,51,.38); z-index: 10190; }
.ck-palette { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); width: 620px; max-width: calc(100vw - 2rem); background: #fff; border: 1px solid rgba(11,39,51,.08); border-radius: 12px; z-index: 10200; box-shadow: 0 24px 60px rgba(11,39,51,.28); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.ck-palette-inputrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef2f5; }
.ck-palette-inputicon { color: rgba(11,39,51,.4); font-size: 13px; }
.ck-palette-input { flex: 1; border: none; outline: none; font-size: 15px; color: #0B2733; background: transparent; }
.ck-palette-input::placeholder { color: rgba(11,39,51,.38); }
/* A 2px gap between rows rather than rows packed edge to edge: at this row height the tinted selected
   state needs a little air around it to read as one highlighted item instead of a band. */
.ck-palette-results { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ck-palette-empty { padding: 26px 16px; text-align: center; color: rgba(11,39,51,.5); font-size: 13px; }

/* Section header ("Go to" / "Help & docs"). Sentence case and quiet on purpose: it is a divider that
   happens to be readable, not a heading — tracked mono uppercase here would out-shout the results it is
   supposed to be organising, which is the mistake the Fieldwork stage captions had to be walked back from. */
.ck-palette-section {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(11,39,51,.42);
  padding: 10px 10px 3px;
}
.ck-palette-section:first-child { padding-top: 4px; }

.ck-palette-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; transition: background var(--ck-transition); }
/* Selected and hover are the SAME state on purpose: the mouse moving over a row makes it the selected
   row (see @onmouseenter), so showing two different tints would be describing one thing twice. */
.ck-palette-row.sel { background: rgba(78,195,224,.13); }
.ck-palette-rowicon { width: 22px; text-align: center; color: #4EC3E0; font-size: 13px; flex: 0 0 auto; }
/* Help rows carry the same glyph treatment in a muted tone. Brand cyan marks somewhere you can GO; an
   article is something you READ, so it is deliberately a step quieter than a destination even though the
   section header has already said which is which. */
.ck-palette-rowicon.help { color: rgba(11,39,51,.34); }
.ck-palette-row.sel .ck-palette-rowicon.help { color: rgba(11,39,51,.5); }
.ck-palette-rowtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ck-palette-rowtitle { font-size: 13.5px; color: #0B2733; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-palette-rowsub { font-size: 11.5px; color: rgba(11,39,51,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Caption above the featured-article default list (palette open, nothing typed). Deliberately quieter than
   a result row: it explains the rows below rather than being one of them. */
.ck-palette-hint { padding: 10px 14px 2px; font-size: 11.5px; color: rgba(11,39,51,.45); }

:root[data-theme="dark"] .ck-palette { background: var(--ck-surface); border-color: var(--ck-border); }
:root[data-theme="dark"] .ck-palette-inputrow { border-color: var(--ck-border); }
:root[data-theme="dark"] .ck-palette-input,
:root[data-theme="dark"] .ck-palette-rowtitle { color: var(--ck-text); }
:root[data-theme="dark"] .ck-palette-rowsub,
:root[data-theme="dark"] .ck-palette-section,
:root[data-theme="dark"] .ck-palette-hint,
:root[data-theme="dark"] .ck-palette-empty { color: rgba(255,255,255,.5); }
:root[data-theme="dark"] .ck-palette-rowicon.help { color: rgba(255,255,255,.4); }
:root[data-theme="dark"] .ck-palette-row.sel .ck-palette-rowicon.help { color: rgba(255,255,255,.6); }

/* Trial-balance annotation panel — tickmarks, note and workpaper links for one TB line.
   Mirrors .ck-help-panel geometry and z-index deliberately: same slide-in affordance, same need to
   clear .sidebar (9999) and the Radzen dialog layer. Slightly narrower than help because the content
   is controls rather than prose, and the auditor wants to keep reading the grid underneath. */
.ck-tb-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.18); z-index: 10090; }
.ck-tb-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; background: #fff; z-index: 10100; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.18); animation: ckHelpSlide .18s ease-out; }
.ck-tb-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; background: var(--ck-blue, #47BED9); color: #fff; }
.ck-tb-panel-title { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.ck-tb-panel-sub { font-size: .78rem; opacity: .85; font-variant-numeric: tabular-nums; }
.ck-tb-panel-iconbtn { background: transparent; border: none; color: #fff; cursor: pointer; padding: .3rem .45rem; border-radius: 6px; font-size: .95rem; }
.ck-tb-panel-iconbtn:hover { background: rgba(255,255,255,.18); }
.ck-tb-panel-body { flex: 1; overflow-y: auto; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 1.25rem; }
.ck-tb-sec-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; font-weight: 600; margin-bottom: .5rem; }

/* Tickmark picker. The symbol is the affordance — big, monospaced, obviously clickable. */
.ck-tb-marks { display: flex; flex-wrap: wrap; gap: .4rem; }
.ck-tb-mark { display: flex; align-items: center; gap: .4rem; border: 1px solid #dce5ea; background: #fff; border-radius: 6px; padding: .35rem .55rem; cursor: pointer; font-size: .8rem; color: #33475b; text-align: left; }
.ck-tb-mark:hover:not(:disabled) { border-color: var(--ck-blue, #47BED9); background: #f4fbfd; }
.ck-tb-mark:disabled { cursor: not-allowed; opacity: .55; }
.ck-tb-mark.on { border-color: var(--ck-blue, #47BED9); background: #e8f6fb; font-weight: 600; }
.ck-tb-mark-sym { font-family: ui-monospace, Consolas, monospace; font-size: 1rem; font-weight: 700; min-width: 1.4em; text-align: center; color: var(--ck-blue, #47BED9); }

/* Applied marks as rendered in the grid column — read-only, dense, scannable. */
.ck-tb-cell { display: inline-flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.ck-tb-cell-sym { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--ck-blue, #47BED9); font-size: .95rem; line-height: 1; }
.ck-tb-cell-note { color: #96590b; font-size: .8rem; }
.ck-tb-cell-link { color: #2e6b45; font-size: .8rem; }
.ck-tb-cell-empty { color: #c6d0d6; }

.ck-tb-ref { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 1px solid #e6ecf0; border-radius: 6px; padding: .4rem .55rem; font-size: .82rem; }
.ck-tb-legend-row { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #f2f5f7; font-size: .82rem; }
.ck-tb-legend-sym { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--ck-blue, #47BED9); }

/* ChekAdmin help management */
.ck-helpadmin-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; }
.ck-helpadmin-cats, .ck-helpadmin-articles { border: 1px solid #e6ecf0; border-radius: 8px; padding: .5rem; background: #fff; }
.ck-helpadmin-panelhead { display: flex; justify-content: space-between; align-items: center; font-weight: 600; padding: .3rem .4rem .5rem; border-bottom: 1px solid #eef2f5; margin-bottom: .4rem; }
.ck-helpadmin-catrow { display: flex; justify-content: space-between; align-items: center; padding: .4rem; border-radius: 6px; cursor: pointer; }
.ck-helpadmin-catrow:hover { background: #f4f9fb; }
.ck-helpadmin-catrow.sel { background: #eef8fc; }
.ck-helpadmin-catname { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.ck-helpadmin-catname i { color: #2DADC9; width: 16px; text-align: center; }
.ck-helpadmin-draft { font-size: .65rem; background: #fdecea; color: #b00020; border-radius: 8px; padding: 0 6px; }
.ck-helpadmin-catactions { display: flex; align-items: center; gap: 1px; }
.ck-helpadmin-count { font-size: .75rem; color: #9aa7ad; margin-right: 4px; }
.ck-helpadmin-empty { color: #9aa7ad; padding: 1rem; }
.ck-helpedit-form { display: flex; flex-direction: column; gap: 1rem; }
.ck-helpedit-row { display: flex; flex-direction: column; gap: .3rem; }
.ck-helpedit-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ck-helpedit-hint { font-size: .75rem; color: #9aa7ad; }
.ck-helpedit-toggles { display: flex; gap: 2rem; }
@media (max-width: 760px) { .ck-helpadmin-grid { grid-template-columns: 1fr; } .ck-helpedit-2col { grid-template-columns: 1fr; } }


/* Subscription plan comparison table (/subscription) */
.ck-plan-compare { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: 13px; }
.ck-plan-compare th, .ck-plan-compare td { padding: 7px 10px; border-bottom: 1px solid var(--ck-border, #e9ecef); text-align: left; }
.ck-plan-compare thead th { font-weight: 700; color: var(--ck-text, #1a2b33); border-bottom: 2px solid var(--ck-border, #e9ecef); }
.ck-plan-compare .ck-pc-col { text-align: center; width: 112px; }
.ck-plan-compare .ck-pc-current { color: var(--rz-primary); }
.ck-plan-compare .ck-pc-cell { text-align: center; }
.ck-plan-compare .ck-pc-section td { background: #f4f7f9; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ck-text-secondary, #6c757d); padding: 6px 10px; }
.ck-plan-compare .ck-pc-yes { color: var(--rz-primary); font-weight: 700; }
.ck-plan-compare .ck-pc-no { color: #c0c6cc; }


/* ----------------------------------------------------------------
   4c. COLLAPSED (MINI) SIDEBAR — 64px icon rail + hover-to-expand overlay
   Desktop only (>=991px). The sidebar is position:fixed (z-index 9999 from the base theme),
   so an expanded sidebar FLOATS over the content; the content offset is driven solely by
   .main-panel's width. Three states:

     • PINNED OPEN   (no .sidebar-mini)            260px sidebar, full nav, content = calc(100% - 260px)
     • COLLAPSED     (.sidebar-mini, not :hover)    64px icon rail, labels hidden, content = calc(100% - 64px)
     • HOVER-EXPAND  (.sidebar-mini + .sidebar:hover) 260px overlay, labels fade in, content STAYS at
                                                    calc(100% - 64px) so the sidebar floats over it

   The #minimizeSidebar pin button toggles .sidebar-mini (collapse <-> pin open) and persists it.

   IMPORTANT layout note (this fixes the previous two-column / clipped-text bug): the nav CONTAINER
   is display:block. Bootstrap's `.nav` is `display:flex; flex-wrap:wrap`, which — in this
   fixed-height sidebar — wrapped the items into a SECOND COLUMN with the labels clipped. A plain
   block container stacks the items in one column. Each nav ITEM is a single-row, NO-WRAP flexbox
   ([icon][label]); the icon keeps a constant left anchor and the label is simply clipped by the
   64px rail (overflow:hidden) + faded out, so it reveals on hover without ever moving the icon.
   ---------------------------------------------------------------- */
@media (min-width: 991px) {

  /* ---- Width + floating overlay ---------------------------------------------------------- */
  body.sidebar-mini .sidebar,
  body.sidebar-mini .sidebar .sidebar-wrapper {
    width: 64px !important;
  }
  body.sidebar-mini .main-panel {
    width: calc(100% - 64px) !important;   /* stays at 64px even on hover → sidebar overlays content */
  }
  /* Hover-expand to 260px — only while collapsed (mini); a pinned-open sidebar has no
     .sidebar-mini class so this never fires there. */
  body.sidebar-mini .sidebar:hover,
  body.sidebar-mini .sidebar:hover .sidebar-wrapper {
    width: 260px !important;
  }
  body.sidebar-mini .sidebar { z-index: 9999 !important; }

  /* No scroll in the rail: clip horizontally and kill the perfect-scrollbar rails. */
  body.sidebar-mini .sidebar .sidebar-wrapper { overflow-x: hidden !important; }
  body.sidebar-mini .sidebar .ps__rail-x,
  body.sidebar-mini .sidebar .ps__rail-y { display: none !important; }
  /* A NATIVE vertical scrollbar (when the nav is taller than the viewport) sits at the right edge of the
     64px rail and cut into the right of the icons. Hide it while collapsed — the rail still scrolls by
     wheel/touch, and the bar returns on hover-expand where the 260px width has room for it. */
  body.sidebar-mini .sidebar:not(:hover) .sidebar-wrapper { scrollbar-width: none !important; }
  body.sidebar-mini .sidebar:not(:hover) .sidebar-wrapper::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

  /* ============================================================
     NAV — single column of single-row items.
     ============================================================ */

  /* CONTAINER: a plain block stack. NOT flex, so it can never wrap into a second column. */
  body.sidebar-mini .sidebar .nav {
    display: block !important;
    padding: 6px 0 !important;
    margin: 0 !important;
  }
  body.sidebar-mini .sidebar .nav li {
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }

  /* ITEM: one no-wrap row [icon][label]. margin-left(8) + padding-left(14) + half-icon(10) = 32px,
     so the icon centre sits at the centre of the 64px rail AND stays at that exact x when the
     sidebar expands — the icon never moves horizontally. */
  body.sidebar-mini .sidebar .nav li > a,
  body.sidebar-mini .sidebar .nav li > .nav-link {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    margin: 2px 8px !important;
    padding: 9px 14px !important;      /* left inset = the icon anchor; identical in both states */
    border-radius: 8px !important;
    /* overflow VISIBLE, not hidden: a wide Font Awesome glyph (fa-hospital-user, fa-award, …) is drawn
       slightly wider than its 20px box, and overflow:hidden here clipped that right-hand overhang. The
       label does not need clipping by this element — it is faded out (opacity:0) when collapsed and the
       64px wrapper (overflow-x:hidden) clips any residual width, so nothing spills. */
    overflow: visible !important;
    white-space: nowrap !important;
  }
  /* ICON: fixed 20px box, never floats (override Now-UI's float:left), never shrinks. */
  body.sidebar-mini .sidebar .nav li > a i,
  body.sidebar-mini .sidebar .nav li > .nav-link i {
    float: none !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  /* LABEL: fills the remaining row width; clipped by the rail when collapsed, faded via opacity. */
  body.sidebar-mini .sidebar .nav li > a p,
  body.sidebar-mini .sidebar .nav li > .nav-link p {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;        /* override Now-UI's translate3d(-25px) on collapsed labels */
    transition: opacity 0.2s ease !important;
  }
  /* Collapsed: label invisible (and clipped). Hover/expanded: label fades in. The icon, being the
     first flex child at flex-start, does not move when the label appears. */
  body.sidebar-mini .sidebar:not(:hover) .nav li > a p,
  body.sidebar-mini .sidebar:not(:hover) .nav li > .nav-link p {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.sidebar-mini .sidebar:hover .nav li > a p,
  body.sidebar-mini .sidebar:hover .nav li > .nav-link p {
    opacity: 1 !important;
  }

  /* Active: filled teal pill (same in both states); keep the padding-left anchor so the active
     icon doesn't shift, and drop the base left indicator bar. */
  body.sidebar-mini .sidebar .nav li.active > a,
  body.sidebar-mini .sidebar .nav li > a.active {
    background: rgba(71, 190, 217, 0.20) !important;
    padding-left: 14px !important;
  }
  body.sidebar-mini .sidebar .nav li.active > a::before,
  body.sidebar-mini .sidebar .nav li > a.active::before {
    display: none !important;
  }

  /* Tasks count badge: small overlay on the icon's top-right while collapsed; on hover the label
     returns and the badge flips back to its inline end-of-row position (base margin-left:auto). */
  body.sidebar-mini .sidebar:not(:hover) .nav li > a .ck-nav-badge {
    position: absolute !important;
    top: 4px !important;
    left: 30px !important;
    right: auto !important;
    margin: 0 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    box-shadow: 0 0 0 2px var(--ck-sidebar-mid) !important;
  }

  /* ============================================================
     COLLAPSED-ONLY chrome (logo + pin toggle + profile). Scoped to :not(:hover); on hover these
     stop matching and the base EXPANDED styles take over (full wordmark, normal photo, name shown).
     ============================================================ */

  /* Logo area: a column — the pin toggle pinned to the TOP-RIGHT, the small wordmark centred below
     it (no overlap, because the toggle is in flow at the top of the column, not absolutely placed). */
  body.sidebar-mini .sidebar:not(:hover) .logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 6px !important;
    height: auto !important;
  }
  body.sidebar-mini .sidebar:not(:hover) .navbar-minimize {
    position: static !important;
    align-self: flex-end !important;   /* top-right of the rail */
    margin: 0 !important;
    opacity: 1 !important;             /* override Now-UI's .sidebar-mini .navbar-minimize { opacity:0 } */
  }
  body.sidebar-mini .sidebar:not(:hover) .navbar-minimize .btn {
    width: 28px !important;
    height: 28px !important;
  }
  /* Chek Audit wordmark constrained to 40px wide, centred. */
  body.sidebar-mini .sidebar:not(:hover) .logo a.logo-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.sidebar-mini .sidebar:not(:hover) .logo img {
    display: block !important;
    width: 40px !important;
    max-width: 40px !important;
    height: 36px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  /* Profile: 32px photo centred; name hidden. (On hover the base .user styles restore the normal
     photo size and reveal the name.) */
  body.sidebar-mini .sidebar:not(:hover) .user {
    padding: 8px 0 !important;
  }
  body.sidebar-mini .sidebar:not(:hover) .user .photo {
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto !important;
  }
  body.sidebar-mini .sidebar:not(:hover) .user .info {
    display: none !important;
  }
}


/* The .ck-kbd keyboard chip is gone. It appeared on the top-bar trigger ("Ctrl K") and under the palette
   results ("esc", "↑ ↓ to move", "enter to open"); all of it was permanent instruction for conventions
   every palette already shares, so it taught nothing after the first use and never stopped taking space.
   Every shortcut still works — only the printing of them was removed. */

/* Top-bar trigger for the Ctrl-K palette. Shaped like a search field rather than a bare badge, because
   it IS the app's search — a floating "Ctrl K" badge reads as a hint about something else on the page.

   It was also invisible: the old rule styled it for a dark bar (white text, white translucent fill and
   border) while .ck-topbar is var(--ck-surface) — white on white, border included. */
.ck-topbar-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 208px;
  background: var(--ck-surface);
  border: 1px solid rgba(11, 39, 51, .13);
  border-radius: 10px;
  padding: 5px 6px 5px 11px;
  margin-right: 10px;
  font-size: 13px;
  color: rgba(11, 39, 51, .55);
  cursor: pointer;
  transition: border-color var(--ck-transition), background var(--ck-transition), color var(--ck-transition);
}

.ck-topbar-search > i {
  font-size: 12px;
  color: rgba(11, 39, 51, .45);
  transition: color var(--ck-transition);
}

.ck-topbar-search-label {
  flex: 1;
  text-align: left;
}

.ck-topbar-search:hover {
  border-color: #4EC3E0;
  background: rgba(78, 195, 224, .06);
  color: #0B2733;
}

.ck-topbar-search:hover > i { color: #4EC3E0; }

/* Narrow: the label goes, leaving a plain icon button. */
@media (max-width: 900px) {
  .ck-topbar-search-label { display: none; }
  .ck-topbar-search { min-width: 0; border-radius: 50%; padding: 7px 9px; }
}

:root[data-theme="dark"] .ck-topbar-search {
  background: transparent;
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .6);
}

:root[data-theme="dark"] .ck-topbar-search > i { color: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .ck-topbar-search:hover { color: #fff; background: rgba(78, 195, 224, .1); }

/* ----------------------------------------------------------------
   TRAILING-TRACKING COMPENSATION (must stay LAST in this file)
   ----------------------------------------------------------------
   Letter-spacing is applied AFTER the final glyph as well as between glyphs, so on tracked uppercase
   text that phantom space lands INSIDE the pill. With symmetric padding the right side then reads
   visibly tighter than the left, and a long name like a practice title looks shaved off at the edge —
   which is why the header practice pill appeared clipped despite never truncating anything.

   One mechanism, applied at every tracked-pill call site: each declares the padding it wants and the
   tracking it carries, and the shared rule rebuilds the horizontal padding so the two sides are
   OPTICALLY equal. This block must remain after the class definitions it corrects — every one of them
   sets `padding` as a shorthand, which would otherwise reset the compensated end value. Setting only
   the inline longhands leaves each pill's vertical padding untouched.

   New tracked pill? Add its two custom properties and its selector here rather than hand-tuning a
   lopsided padding pair, which is how this drifted in the first place. */
.ck-topbar-tenant  { --ck-pill-pad-x: 12px; --ck-pill-track: .07em; }
.ck-fw-na          { --ck-pill-pad-x: 4px;  --ck-pill-track: .06em; }
.ck-plan-badge     { --ck-pill-pad-x: 12px; --ck-pill-track: .3px;  }
.ck-standard-pill  { --ck-pill-pad-x: 10px; --ck-pill-track: .02em; }
.rz-badge          { --ck-pill-pad-x: 10px; --ck-pill-track: .04em; }

.ck-topbar-tenant,
.ck-fw-na,
.ck-plan-badge,
.ck-standard-pill {
  letter-spacing: var(--ck-pill-track);
  padding-inline-start: var(--ck-pill-pad-x);
  padding-inline-end: calc(var(--ck-pill-pad-x) + var(--ck-pill-track));
}

/* .rz-badge sets its padding with !important (it is overriding Radzen's own), so the compensation has
   to match that weight to win the longhand. */
.rz-badge {
  letter-spacing: var(--ck-pill-track) !important;
  padding-inline-start: var(--ck-pill-pad-x) !important;
  padding-inline-end: calc(var(--ck-pill-pad-x) + var(--ck-pill-track)) !important;
}