/* ─────────────────────────────────────────────────────────────────────────
   hotkup-lite CRM skin (theme-v1)
   Ported from hotkup-lite/frontend/src/HotKupApp.css — styles the Clients /
   Contacts sidebars ("New Client", "All Clients", "New Contact",
   "All Contacts") and the New Client / New Contact modals to match
   hotkup-lite exactly. Class names are kept identical to lite
   (.hk-clients-*, .hk-mkt-*) so the two codebases stay comparable.
   ───────────────────────────────────────────────────────────────────────── */

/* Design tokens — scoped to .hk-lite containers so they can't collide with
   the rest of the app. Values are lite's Outlook/Fluent palette. */
.hk-lite {
  --ol-accent:      #0f6cbd;   /* Fluent brand blue */
  --ol-accent-deep: #115ea3;   /* hover / pressed */
  --ol-sel:         #eaf3fb;   /* selected row tint */
  --ol-sel-bar:     #0f6cbd;   /* selected left bar */
  --ol-hover:       #e8e6e3;   /* neutral hover */
  --ol-divider:     #e6e4e1;   /* row / list hairline */

  --hk-blue:        var(--ol-accent);
  --hk-blue-deep:   var(--ol-accent-deep);
  --hk-blue-light:  var(--ol-sel);
  --hk-red:         #d93025;

  --hk-bg:          #F5F5F5;   /* app canvas (Fluent neutralLighter) */
  --hk-surface:     #ffffff;   /* cards / content */
  --hk-border:      #e1dfdd;   /* Fluent neutralLight hairline */
  --hk-border-strong: #c8c6c4;

  --hk-text:        #202124;
  --hk-text-2:      #3c4043;
  --hk-text-3:      #5f6368;
  --hk-text-4:      #80868b;

  --hk-radius:      4px;
  --hk-radius-lg:   6px;

  --hk-surface-2:   #f3f2f1;   /* subtle hover fill (Fluent neutralLighter) */
  --hk-shadow-2:    0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ─── "＋ New Client / New Contact" button (top of the sidebar) ─── */
.hk-new-task-btn {
  /* `+ icon | label` centred via a balanced 3-column grid. */
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5625rem;
  text-align: center;
  width: 100%;
  padding: 0.5625rem 1rem;
  background: var(--ol-accent) !important;
  color: #fff !important;
  font-family: inherit;
  font-weight: 400 !important;
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  text-transform: none !important;
  line-height: 1.25;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
  transition: background 0.15s ease, box-shadow 0.18s ease;
  height: 2.375rem;
}
.hk-new-task-btn:hover { background: var(--ol-accent-deep) !important; }
.hk-new-task-btn:active {
  transform: translateY(0);
  filter: brightness(0.97);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(26, 115, 232, 0.22);
}
.hk-new-task-btn > svg:first-of-type {
  justify-self: end;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}
.hk-new-task-btn:disabled,
.hk-new-task-btn[disabled] {
  background: #c4c4c4 !important;
  cursor: not-allowed;
  box-shadow: none;
}
.hk-newbtn-label { white-space: nowrap; }
.hk-new-client-btn { margin-bottom: 1rem; }

/* ─── Left sub-nav (the sidebar itself) ─── */
.app-container .hk-clients-nav,
.hk-clients-nav {
  background: var(--hk-bg) !important;
  padding: 0.75rem 0.875rem 1rem !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.hk-clients-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hk-clients-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: 1rem !important;
}
.hk-clients-nav .hk-clients-folder,
.hk-clients-nav .uk-nav > li > a.hk-clients-folder {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.5rem !important;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem !important;
  color: var(--hk-text-2) !important;
  text-align: left;
  text-transform: none !important;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.hk-clients-nav .hk-clients-folder:hover {
  background: var(--ol-hover) !important;
  color: var(--hk-text) !important;
}
/* Active state — hotkup-ui toggles uk-active / selected-menu on the <li>,
   so map those onto lite's .active look. */
.hk-clients-nav li.uk-active > .hk-clients-folder,
.hk-clients-nav li.selected-menu > .hk-clients-folder {
  background: color-mix(in srgb, var(--ol-accent) 22%, var(--hk-surface)) !important;
  color: var(--hk-text) !important;
  font-weight: 600 !important;
}
.hk-clients-nav li.uk-active > .hk-clients-folder:hover,
.hk-clients-nav li.selected-menu > .hk-clients-folder:hover {
  background: color-mix(in srgb, var(--ol-accent) 28%, var(--hk-surface)) !important;
}
.hk-clients-folder-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.hk-clients-folder-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hk-clients-nav .counter-label {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--hk-text-3);
  background: none;
}

/* Collapsible "CATEGORIES" section header */
.hk-clients-nav .hk-categories-header,
.hk-clients-nav a.hk-categories-header {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.5rem !important;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: var(--hk-text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  text-align: left;
}
.hk-clients-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: 300px;
  overflow-y: auto;
}
.hk-clients-cat-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Middle list pane — "All Clients" / "All Contacts" ─── */
.hk-clients-list-pane {
  background: var(--hk-bg) !important;
  border-right: 1px solid var(--hk-border);
  padding-top: 0.75rem !important;
  /* Soften the list column like lite does. */
  --hk-surface: #ffffff;
  --hk-text: #3c4043;
  --hk-text-2: #5f6368;
  --hk-text-3: #70757a;
  --hk-border: #e1dfdd;
}
.hk-clients-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1rem 0.625rem;
  flex-shrink: 0;
}
.hk-clients-list-title {
  /* matches the task page's Inbox title (.task-list-name) */
  font-family: 'Poppins', sans-serif;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #20242C !important;
  margin: 0;
  letter-spacing: -0.4px;
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
}
.hk-clients-title-note {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--hk-text-3);
  max-width: 125px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hk-clients-head-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.hk-icon-btn {
  /* matches the task page's toolbar buttons (.hk-tool-btn) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: #6E7686;
  cursor: pointer;
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.hk-icon-btn:hover {
  background: #F2F4F7;
  color: #20242C;
}

/* ── Collapsible header search (theme-v1): clicking the Search icon fades
      the title + actions out and morphs the head into the search bar;
      blurring an empty search morphs it back. The head already has
      position:relative (glass band rule below). ── */
.hk-clients-list-head .hk-clients-list-title,
.hk-clients-list-head .hk-clients-head-actions {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.hk-clients-list-head.search-open .hk-clients-list-title,
.hk-clients-list-head.search-open .hk-clients-head-actions {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.hk-clients-list-head .hk-head-search {
  position: absolute;
  top: 0;
  bottom: 0.625rem;   /* = the head's bottom padding, so it sits on the content row */
  left: 1rem;
  right: 1rem;
  margin: 0 !important;
  /* flat inline field — part of the head band itself, not a boxed control */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
  /* revealed with a left → right wipe */
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  pointer-events: none;
  transition: clip-path 0.28s ease, opacity 0.2s ease;
}
.hk-clients-list-head.search-open .hk-head-search {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  pointer-events: auto;
}
/* neutralise the boxed field's focus underline in the head variant */
.hk-clients-list-head .hk-head-search:focus-within {
  border: none !important;
  box-shadow: none !important;
}
/* header-scale input text so it reads as the head band's content */
.hk-clients-list-head .hk-head-search input,
.hk-clients-list-head .hk-head-search input.uk-input {
  font-size: 0.9375rem !important;
}

/* Squared Fluent search field (focus = bottom accent underline) */
.hk-clients-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem 0.75rem;
  padding: 0.4375rem 0.75rem;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  border-radius: 4px;
  color: var(--hk-text-3);
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hk-clients-search:focus-within {
  border-color: var(--hk-border-strong);
  box-shadow: inset 0 -2px 0 var(--ol-accent);
  color: var(--hk-text-2);
}
.hk-clients-search input,
.hk-clients-search input.uk-input {
  flex: 1;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  outline: none;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: 0.8125rem !important;
  color: var(--hk-text) !important;
}
.hk-clients-search input::placeholder { color: var(--hk-text-3); }
.hk-clients-search .hk-search-clear {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--hk-text-3);
  flex-shrink: 0;
}

/* ─── Modal — New Client / New Contact ─── */
.uk-modal-dialog.hk-mkt-modal,
.hk-mkt-modal {
  background: var(--hk-surface) !important;
  border: 1px solid var(--hk-border) !important;
  border-radius: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 34rem !important;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32) !important;
  overflow: hidden;
  padding: 0 !important;
}
.hk-mkt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--hk-border);
  flex-shrink: 0;
}
.hk-mkt-modal-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--hk-text) !important;
  margin: 0;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}
.hk-mkt-modal-title-sub {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--hk-text-3);
}
.hk-mkt-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border-radius: 50%;
  color: var(--hk-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.hk-mkt-modal-close:hover { background: var(--hk-bg); color: var(--hk-text); }

/* Body / form host */
.hk-mkt-modal-formhost {
  display: flex;
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}
.hk-wf-create-host {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  min-height: 0;
  font-size: 0.875rem;
  background: var(--hk-surface);
}
.hk-mkt-modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin: 0;
}
.hk-mkt-modal-content {
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
}
.hk-mkt-step-panel {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.hk-settings-grid-2-tight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.hk-settings-grid-3-tight {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}
/* wide variant — 3-column create forms (new contact) */
.uk-modal-dialog.hk-mkt-modal.hk-mkt-modal-wide,
.hk-mkt-modal.hk-mkt-modal-wide {
  max-width: 56rem !important;
}

/* Fields */
.hk-mkt-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.875rem;
}
.hk-mkt-field-label {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase !important;
  color: var(--hk-text-3) !important;
}
.hk-req { color: var(--hk-red); }
.hk-field-error {
  color: var(--hk-red);
  font-size: 0.75rem;
}
.hk-mkt-input,
.hk-mkt-textarea,
input.uk-input.hk-mkt-input,
textarea.uk-textarea.hk-mkt-textarea {
  background: var(--hk-bg) !important;
  border: 1px solid var(--hk-border) !important;
  border-radius: var(--hk-radius) !important;
  padding: 0.5rem 0.75rem !important;
  height: auto !important;
  font-family: inherit;
  font-size: 0.875rem !important;
  color: var(--hk-text) !important;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.hk-mkt-input:focus,
.hk-mkt-textarea:focus,
input.uk-input.hk-mkt-input:focus,
textarea.uk-textarea.hk-mkt-textarea:focus {
  border-color: var(--hk-blue) !important;
  background: var(--hk-surface) !important;
  box-shadow: 0 0 0 3px var(--hk-blue-light) !important;
}
.hk-mkt-textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }

/* Footer */
.hk-mkt-modal-foot {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--hk-border);
  background: var(--hk-bg);
  flex-shrink: 0;
}
.hk-mkt-foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: inherit;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  padding: 0.4375rem 0.875rem !important;
  border-radius: 4px !important;
  cursor: pointer;
  min-width: 0 !important;
  text-transform: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hk-mkt-foot-ghost {
  background: transparent !important;
  border: 1px solid var(--hk-border) !important;
  color: var(--hk-text) !important;
}
.hk-mkt-foot-ghost:hover:not(:disabled) {
  background: var(--hk-surface) !important;
  border-color: var(--hk-text-3) !important;
}
.hk-mkt-foot-primary {
  background: var(--hk-blue) !important;
  border: 1px solid var(--hk-blue) !important;
  color: #fff !important;
}
.hk-mkt-foot-primary:hover:not(:disabled) {
  background: var(--hk-blue-deep) !important;
  border-color: var(--hk-blue-deep) !important;
}
.hk-mkt-foot-primary:disabled {
  background: var(--hk-text-3) !important;
  border-color: var(--hk-text-3) !important;
  cursor: default;
  opacity: 0.55;
}
.hk-mkt-foot-spacer {
  flex: 1;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--hk-text-3);
}

/* ═════════════════════════════════════════════════════════════════════
   Pass 2 — exact widths, lite client/contact cards, palette fixes.
   The theme-*.css files force .side-bar-light to 175px and the list
   container to flex-basis:30% with [data-theme] selectors, so these
   overrides match that specificity and load later.
   ═════════════════════════════════════════════════════════════════════ */

/* Gray canvas behind the frosted list pane and the detail area, so the
   pane's rounded corners and shadow actually read (the root's inline
   background is transparent white — !important beats the inline style). */
.app-container .crm-module-container,
.app_container.crm-module-container {
  background: #f5f5f5 !important;
}

/* Sidebar — exactly 214px on both the Clients and Contacts pages. */
.app-container .side-bar-light.hk-clients-nav,
.app_container .side-bar-light.hk-clients-nav {
  width: 214px !important;
  min-width: 214px !important;
  max-width: 214px !important;
  /* The nav sits in a COLUMN flex (.app-side-menu-content), so the flex
     shorthand controls its HEIGHT here — grow to fill the column. The
     214px width is pinned by the width properties above; the horizontal
     214px slot is pinned on .app-side-menu below. */
  flex: 1 1 auto !important;
  margin-top: 0 !important;
  top: 0 !important;
  border-top: none !important;
  border-radius: 0 !important;
  border-right: none !important;
  background: #F5F5F5 !important;
  font-size: 0.8125rem !important;
  padding: 0.75rem 0.875rem 1rem !important;
  height: 100% !important;
  box-sizing: border-box;
  /* The theme forces overflow-y:hidden on .side-bar-light; in this flex
     column that lets the categories list (overflow:auto → flex min-size 0)
     absorb all the squeeze and collapse to nothing. The nav itself scrolls
     instead, like lite. */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* Categories behave like the tasks panel: the section fills whatever
   height is left under the pinned button/folders and scrolls internally —
   the panel itself never scrolls the button away. min-height guards
   against total collapse if an ancestor ever stops stretching again. */
.hk-clients-nav .hk-clients-nav-list { flex-shrink: 0; }
.hk-clients-nav .hk-categories-header { flex-shrink: 0; }
.hk-clients-nav .hk-clients-cat-list {
  flex: 1 1 auto;
  min-height: 6rem;
  max-height: none;
  overflow-y: auto;
}
/* Stop the outer menu column from flex-growing past the 214px nav. */
.app-container .app-side-menu:has(.hk-clients-nav),
.app_container .app-side-menu:has(.hk-clients-nav) {
  flex: 0 0 214px !important;
  width: 214px !important;
  min-width: 214px !important;
}
.app-side-menu:has(.hk-clients-nav) .app-side-menu-content { width: 100%; height: 100%; }
/* Neutralise the theme's li hover/padding inside the lite nav. */
.app-container .hk-clients-nav ul > li,
.app_container .hk-clients-nav ul > li { padding: 0 !important; }
.app-container .hk-clients-nav ul > li:not(.uk-parent):hover,
.app_container .hk-clients-nav ul > li:not(.uk-parent):hover { background: transparent !important; }
.hk-clients-nav .hk-clients-folder { font-weight: 400 !important; }

/* List pane — exactly 22rem on both pages, flush rows (no side padding). */
.app-container .list-of-tasks-container.hk-clients-list-pane,
.app_container .list-of-tasks-container.hk-clients-list-pane {
  width: 22rem !important;
  min-width: 22rem !important;
  max-width: 22rem !important;
  flex: 0 0 22rem !important;
  flex-basis: 22rem !important;
  /* 0.75rem top inset — same as the task inbox pane, so the "All Clients" /
     "All Contacts" head sits at the same height as "Inbox" */
  padding: 0.75rem 0 0 0 !important;
  box-sizing: border-box;
  /* liquid-glass panel, same treatment as the task inbox list pane:
     translucent frosted fill, rounded corners, bottom inset so the
     bottom rounding shows. */
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 16px !important;
  margin-bottom: 12px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.08);
}
/* The header/search sit flush against the pane's 1rem gutter. */
.hk-clients-list-pane .hk-clients-list-head {
  padding: 0 1rem 0.625rem;
  /* liquid-glass band over the frosted pane, same as the inbox toolbar;
     the lift guards its children against the backdrop-filter stacking
     context hiding any flyout behind the translucent list. */
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
  position: relative;
  z-index: 50;
}
.hk-clients-list-pane .hk-clients-search { margin: 0 1rem 0.75rem; }
.hk-clients-list-pane .task-list { margin-top: 0 !important; }

/* Pagination spinner row — compact, orange ring, same as the task inbox */
.hk-clients-list-pane .hk-list-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hk-clients-list-pane .hk-list-more .hk-spinner { color: #FF7A18; }

/* ─── Client / contact cards — lite's .hk-client-item treatment ───
   The .list-row inside each .task_item becomes the card: white, flush,
   full-width, hairline-separated; hover = neutral grey; selected = blue
   tint + 3px accent bar (the .active-border element inside the row). */
.hk-clients-list-pane .task_item { flex-shrink: 0; }
.hk-clients-list-pane .list-row {
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  /* transparent so the pane's single frosted-glass surface shows through
     the rows, same as the task inbox cards (was var(--hk-surface) white) */
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(16, 24, 40, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  /* Right padding clears the absolutely-positioned badge cluster; 4rem
     min-height mirrors lite's reserved two-badge column (2.75rem content
     + 0.625rem vertical padding each side, border-box). */
  padding: 0.625rem 3.25rem 0.625rem 0.875rem !important;
  min-height: 4rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.hk-clients-list-pane .list-row:hover { background: var(--ol-hover) !important; }
.hk-clients-list-pane .list-row.active,
.hk-clients-list-pane .list-row.active:hover { background: var(--ol-sel) !important; }
.hk-clients-list-pane .list-row .active-border {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  border-radius: 0 !important;
  background: var(--ol-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: left;
  transition: transform 0.16s ease;
}
.hk-clients-list-pane .list-row.active .active-border { transform: scaleX(1) !important; }

.hk-ct-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.hk-client-num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ol-accent);
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  min-width: 2.75rem;
}
.hk-ct-name {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--hk-text);
  letter-spacing: -0.01em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
/* Star — fixed slot, fades in on hover, gold when starred. */
.hk-client-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--hk-text-3);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.hk-clients-list-pane .list-row:hover .hk-client-star,
.hk-clients-list-pane .list-row:focus-within .hk-client-star { opacity: 1; }
.hk-client-star.starred { opacity: 1; color: #f5a800; }
/* INACTIVE / DISABLED chip */
.hk-ct-chip {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hk-red) 14%, transparent);
  color: var(--hk-red);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Right-side badge cluster (open-task count etc.) — vertically centred. */
.hk-clients-list-pane .task_item .hk-ct-right-abs {
  top: 50% !important;
  transform: translateY(-50%);
  right: 0.875rem !important;
}
/* Open-task tracker — lite's solid blue pill (overrides the inline
   #2579FF circle via !important). */
.hk-clients-list-pane .hk-client-tasks-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 1.5rem !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.2 !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  padding: 0.1875rem 0.5rem !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--ol-accent) !important;
  color: #fff !important;
}

/* "No more available records." footer — lite's quiet italic note. */
.hk-clients-list-pane .hk-clients-list-foot,
.hk-clients-list-pane #clientListIntersectionObserver,
.hk-clients-list-pane #contactListIntersectionObserver {
  text-align: center;
  font-size: 0.6875rem !important;
  color: var(--hk-text-3) !important;
  background: transparent !important;
  padding: 0.75rem 1rem !important;
  font-style: italic;
  border: none !important;
}

/* ═════════════════════════════════════════════════════════════════════
   Pass 3 — Reports & Calendar left rails (lite's .hk-reports-nav /
   .hk-cal-nav). Both rails also carry .hk-clients-nav so they inherit the
   shared rail treatment (canvas, padding, folder rows, categories fill);
   these blocks come later in the file, so their widths win the tie
   against the 214px clients block. */

.app-container .side-bar-light.hk-reports-nav,
.app_container .side-bar-light.hk-reports-nav {
  width: 13rem !important;
  min-width: 13rem !important;
  max-width: 13rem !important;
}
.app-container .app-side-menu:has(.hk-reports-nav),
.app_container .app-side-menu:has(.hk-reports-nav) {
  flex: 0 0 13rem !important;
  width: 13rem !important;
  min-width: 13rem !important;
}
.app-container .side-bar-light.hk-cal-nav,
.app_container .side-bar-light.hk-cal-nav {
  width: 14rem !important;
  min-width: 14rem !important;
  max-width: 14rem !important;
}
.app-container .app-side-menu:has(.hk-cal-nav),
.app_container .app-side-menu:has(.hk-cal-nav) {
  flex: 0 0 14rem !important;
  width: 14rem !important;
  min-width: 14rem !important;
}

/* ─── Split "New X" button (Reports "New Report", Marketing "New Blast",
   Calendar "New Task") ───
   Mirrors the Tasks page's New Task split button EXACTLY (task-inbox.vue's
   scoped .new_task_button_wrapper rules): the WRAPPER is the visual button
   (blue fill, fixed 2.375rem height, 4px radius, shadow) and the two inner
   buttons are transparent segments, so only the label text and left icon
   differ per page. !important defeats the legacy uk-button styling. */
.hk-lite .hk-new-report-wrap,
.hk-lite .new_task_button_wrapper.hk-new-report-wrap {
  position: relative;
  width: 100% !important;
  margin: 0 0 1rem !important;
  height: 2.375rem;
  display: flex;
  align-items: stretch;
  background: #0f6cbd;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10) !important;
  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Reports wrap is always visible; the calendar wrap's display (flex vs
   none) stays with the component's container queries that swap it for the
   mini button on narrow layouts. */
.hk-reports-nav .hk-new-report-wrap { display: flex; }
.hk-lite .hk-new-report-btn {
  flex: 1 1 auto;
  min-width: 0 !important;
  height: 100%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  background: transparent !important;
  background-color: transparent !important;
  color: #fff !important;
  font-family: inherit !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.25rem !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap !important;
}
.hk-lite .hk-new-report-btn:hover {
  background: #115ea3 !important;
  background-color: #115ea3 !important;
}
.hk-lite .hk-new-report-btn > svg { width: 16px; height: 16px; flex-shrink: 0; }
.hk-lite .hk-new-report-btn span { white-space: nowrap; margin-left: 0 !important; }
.hk-lite .hk-new-report-caret {
  flex: 0 0 auto;
  align-self: stretch;
  height: 100%;
  min-height: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 0 !important;
  color: #fff !important;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 0.5rem !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.15s ease;
}
.hk-lite .hk-new-report-caret:hover {
  background: #115ea3 !important;
  background-color: #115ea3 !important;
}
.hk-reports-nav-top { margin-bottom: 0.25rem; }
.hk-cal-nav-top { position: relative; margin-bottom: 1rem; }

/* ─── "New X" options dropdown — keep the legacy .new_task_options
   open/close mechanics (position:fixed + transform scale toggled by JS),
   reskin to lite's .hk-new-report-menu card. ─── */
.hk-lite .new_task_options.hk-new-report-menu {
  background: var(--hk-surface) !important;
  border: 1px solid var(--hk-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.10), 0 8px 24px rgba(60, 64, 67, 0.14) !important;
  padding: 0.25rem !important;
}
.hk-lite .new_task_options.hk-new-report-menu .menu {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.hk-lite .new_task_options.hk-new-report-menu .menu > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem !important;
  color: var(--hk-text) !important;
  padding: 0.5rem 0.625rem !important;
  border-radius: 0.375rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.hk-lite .new_task_options.hk-new-report-menu .menu > div:hover {
  background: var(--hk-blue-light) !important;
  color: var(--hk-blue) !important;
}

/* ─── Reports rail — Saved Reports section ─── */
.hk-reports-nav-section { margin-bottom: 1.25rem; }
.hk-reports-nav-section ul { list-style: none; margin: 0; padding: 0; }
.hk-reports-nav-label {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hk-text-3) !important;
  padding: 0 0.25rem 0.5rem;
}
.hk-reports-nav-group { margin-top: 0.5rem; }
.hk-reports-nav-group:first-of-type { margin-top: 0; }
.hk-reports-nav-sublabel {
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hk-text-3) !important;
  padding: 0 0.25rem 0.25rem;
}
/* Row overrides beat the page's legacy global .saved-report-item /
   .report-selected rules (grey #d7d5d5) via higher specificity. */
.hk-reports-nav li.saved-report-item {
  display: flex;
  align-items: center;
  padding: 0 !important;
  border-radius: 0.4375rem !important;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.hk-reports-nav li.saved-report-item:hover { background: var(--hk-surface) !important; }
.hk-reports-nav li.saved-report-item.report-selected,
.hk-reports-nav li.saved-report-item.report-selected:hover,
.hk-reports-nav li.saved-report-item.report-selected:active {
  background: var(--ol-sel) !important;
}
.hk-reports-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--hk-text-2);
  transition: color 0.15s;
}
.hk-reports-nav li.saved-report-item.report-selected .hk-reports-nav-item {
  color: var(--ol-accent);
  font-weight: 600;
}
.hk-reports-nav-item svg { flex-shrink: 0; }
.hk-reports-nav-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hk-reports-nav-empty {
  font-size: 0.75rem;
  color: var(--hk-text-3);
  padding: 0.25rem 0.5rem;
  margin: 0;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   New-task modal pickers (theme-v1)
   Ported from hotkup-lite/frontend/src/HotKupApp.css — the custom single-
   select (SelectBox), inline multi-selects (SimpleMultiSelect / people
   picker), priority pills and the date-time picker (DueDateField) used by
   src/app/ui-components/hk/*.vue. Class names kept identical to lite; the
   theme tokens they use are the ones scoped to .hk-lite above.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Single-select trigger (shared input styling) ─── */
.hk-report-select {
  width: 100%;
  background: var(--hk-bg);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--hk-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}
.hk-report-select:focus {
  border-color: var(--hk-blue);
  background: var(--hk-surface);
  box-shadow: 0 0 0 3px var(--hk-blue-light);
}
.hk-report-select-wrap { position: relative; }
.hk-report-select-caret {
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--hk-text-2);
  display: flex;
}

/* ─── Priority / state pills ─── */
.hk-report-chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.hk-report-chip {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  color: var(--hk-text);
  font-family: inherit;
  font-size: 0.8125rem; font-weight: 500;
  padding: 0.375rem 0.875rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hk-report-chip:hover { border-color: var(--hk-text-3); }
.hk-report-chip.active {
  background: var(--hk-blue);
  border-color: var(--hk-blue);
  color: #fff;
}
.hk-report-chip-dot {
  width: 0.4375rem; height: 0.4375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Inline multi-select (Clients / Contacts) ─── */
.hk-report-multi { position: relative; }
.hk-report-multi-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  background: var(--hk-bg);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 0.4375rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--hk-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 2.375rem;
}
.hk-report-multi-trigger:hover { border-color: var(--hk-text-3); }
.hk-report-multi-values {
  flex: 1;
  display: flex; flex-wrap: wrap; gap: 0.3125rem;
  align-items: center;
  min-height: 1.5rem;
}
.hk-report-multi-placeholder { color: var(--hk-text-3); font-size: 0.8125rem; }
.hk-report-multi-chip {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  background: var(--hk-blue-light);
  color: var(--hk-blue);
  font-size: 0.75rem; font-weight: 500;
  padding: 0.1875rem 0.375rem 0.1875rem 0.5rem;
  border-radius: 3px;
}
.hk-report-multi-x {
  background: none; border: none; cursor: pointer;
  color: inherit;
  padding: 0.0625rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.hk-report-multi-x:hover { opacity: 1; background: color-mix(in srgb, var(--ol-accent) 18%, transparent); }
.hk-report-multi-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem);
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow-2);
  z-index: 40;
  padding: 0.25rem;
  max-height: 14rem; overflow-y: auto;
}
.hk-report-multi-menu.up { top: auto; bottom: calc(100% + 0.25rem); }
.hk-report-multi-option {
  width: 100%; display: flex; align-items: center; gap: 0.625rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem; color: var(--hk-text);
  padding: 0.4375rem 0.5rem;
  border-radius: 0.375rem;
  text-align: left;
  transition: background 0.12s;
}
.hk-report-multi-option:hover { background: var(--hk-bg); }
.hk-report-multi-check {
  width: 0.875rem; height: 0.875rem;
  border-radius: 0.1875rem;
  border: 1.5px solid var(--hk-text-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.hk-report-multi-option.selected .hk-report-multi-check {
  background: var(--hk-blue);
  border-color: var(--hk-blue);
}
.hk-report-multi-inline .hk-report-multi-trigger { cursor: text; }
.hk-report-multi-input {
  flex: 1 1 4rem; min-width: 3.5rem;
  border: none; outline: none; background: none;
  font-family: inherit; font-size: 0.8125rem; color: var(--hk-text);
  padding: 0.1875rem 0;
}
.hk-report-multi-input::placeholder { color: var(--hk-text-3); }

/* ─── Custom single-select dropdown (SelectBox) ─── */
.hk-select-trigger {
  display: flex; align-items: center;
  text-align: left;
  cursor: pointer;
}
.hk-select-trigger:hover { border-color: var(--hk-text-3); }
.hk-select-trigger:focus-visible {
  border-color: var(--hk-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hk-blue) 18%, transparent);
}
.hk-select.disabled { opacity: 0.6; }
.hk-select.disabled .hk-select-trigger { cursor: not-allowed; }
.hk-select-value {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hk-select-value.placeholder { color: var(--hk-text-3); }
.hk-select-option { justify-content: space-between; }
.hk-select-option-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hk-select-option.selected { color: var(--hk-blue); font-weight: 600; }
.hk-select-option.disabled { color: var(--hk-text-4); cursor: not-allowed; }
.hk-select-option.disabled:hover { background: none; }
.hk-select-check { flex-shrink: 0; color: var(--hk-blue); }

/* Stage-transitions "Changed by" tooltip — let long full names fit
   (UIkit caps tooltips at 200px otherwise). */
.uk-tooltip.tktr-name-tooltip {
  max-width: 380px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ─── People multi-select (Assign To / Followers) ─── */
.hk-settings-ms {
  position: relative;
  min-width: 16rem;
  width: 100%;
  max-width: 24rem;
}
.hk-settings-ms-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 0.3125rem 0.5rem 0.3125rem 0.625rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 2.25rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hk-settings-ms-trigger:hover { border-color: var(--hk-text-3); }
.hk-settings-ms.disabled .hk-settings-ms-trigger {
  background: var(--hk-bg);
  cursor: not-allowed;
  opacity: 0.65;
}
.hk-settings-ms.disabled .hk-settings-ms-trigger:hover { border-color: var(--hk-border); }
.hk-settings-ms-trigger.open {
  border-color: var(--hk-border-strong);
  box-shadow: inset 0 -2px 0 var(--ol-accent);
}
.hk-settings-ms-values {
  flex: 1;
  display: flex; flex-wrap: wrap; gap: 0.3125rem;
  align-items: center;
  min-width: 0;
}
.hk-settings-ms-placeholder { color: var(--hk-text-3); font-size: 0.8125rem; }
.hk-settings-ms-chip {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  background: var(--hk-bg);
  border: 1px solid var(--hk-border);
  color: var(--hk-text);
  font-size: 0.75rem; font-weight: 500;
  padding: 0.125rem 0.375rem 0.125rem 0.5rem;
  border-radius: 3px;
}
.hk-settings-ms-chip-x {
  background: none; border: none; cursor: pointer;
  color: var(--hk-text-3);
  padding: 0.0625rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.hk-settings-ms-chip-x:hover {
  color: var(--hk-red);
  background: rgba(234, 67, 53, 0.10);
}
.hk-settings-ms-popover {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0; right: 0;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow-2);
  z-index: 60;
  display: flex; flex-direction: column;
  max-height: 18rem;
  overflow: hidden;
}
.hk-settings-ms-popover.up { top: auto; bottom: calc(100% + 0.25rem); }
.hk-settings-ms-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem;
  display: flex; flex-direction: column;
  gap: 0.125rem;
}
/* Slim 3px scrollbar inside every dropdown menu. */
.hk-settings-ms-list,
.hk-report-multi-menu {
  scrollbar-width: thin;                                   /* Firefox */
  scrollbar-color: var(--hk-border-strong) transparent;
}
.hk-settings-ms-list::-webkit-scrollbar,
.hk-report-multi-menu::-webkit-scrollbar { width: 3px; }
.hk-settings-ms-list::-webkit-scrollbar-track,
.hk-report-multi-menu::-webkit-scrollbar-track { background: transparent; }
.hk-settings-ms-list::-webkit-scrollbar-thumb,
.hk-report-multi-menu::-webkit-scrollbar-thumb {
  background: var(--hk-border-strong);
  border-radius: 2px;
}
.hk-settings-ms-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--hk-text-3);
  font-style: italic;
  margin: 0;
}
.hk-settings-ms-inline .hk-settings-ms-trigger { cursor: text; }
.hk-settings-ms-inline-input {
  flex: 1 1 8rem; min-width: 6rem;
  border: none; outline: none; background: none;
  font-family: inherit; font-size: 0.8125rem; color: var(--hk-text);
  padding: 0.1875rem 0;
}
.hk-settings-ms-inline-input::placeholder { color: var(--hk-text-3); }
.hk-settings-ms-option {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--hk-radius);
  cursor: pointer;
  transition: background 0.12s;
}
.hk-settings-ms-option:hover { background: var(--ol-hover); }
/* theme-v1: no filled row background for selected options — like the
   hk-report-multi menus, only the check square turns blue. */
.hk-settings-ms-option input { display: none; }
.hk-settings-ms-check {
  width: 0.9375rem; height: 0.9375rem;
  border-radius: 0.25rem;
  border: 1.5px solid var(--hk-text-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.hk-settings-ms-check.on {
  background: var(--hk-blue);
  border-color: var(--hk-blue);
}
.hk-settings-ms-text {
  display: flex; flex-direction: column;
  min-width: 0;
}
.hk-settings-ms-name {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--hk-text);
}
.hk-settings-ms-email {
  font-size: 0.6875rem;
  color: var(--hk-text-3);
}

/* ─── New-task form layout ─── */
.hk-newtask-form {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  width: 100%;
}
.hk-newtask-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.75rem 0.5rem;
  display: flex; flex-direction: column;
  gap: 1rem;
}
/* Normalise every field control to one height / border / radius / fill so a
   row reads as a single clean line. */
.hk-newtask-body .hk-settings-ms-trigger,
.hk-newtask-body .hk-report-multi-trigger,
.hk-newtask-body .hk-report-select,
.hk-newtask-body .hk-duedate-btn {
  min-height: 2.875rem;
  box-sizing: border-box;
  border: 1px solid var(--hk-border-strong);
  border-radius: 4px;
  background: var(--hk-surface);
}
.hk-newtask-body .hk-mkt-input,
.hk-newtask-body .hk-mkt-textarea { border-radius: 4px; }
.hk-newtask-body .hk-mkt-input:hover:not(:focus):not(:disabled),
.hk-newtask-body .hk-select-trigger:hover,
.hk-newtask-body .hk-report-multi-trigger:hover,
.hk-newtask-body .hk-settings-ms-trigger:hover,
.hk-newtask-body .hk-duedate-btn:hover { border-color: var(--hk-text-3); }
.hk-newtask-body .hk-report-multi-menu,
.hk-newtask-body .hk-settings-ms-popover,
.hk-newtask-body .hk-select-menu { border-radius: 3px; }

/* Report builders (theme-v1): the same field normalisation as the New Task
   modal, so the report dropdowns read identically. .hk-report-builder is the
   task/form/pipeline report form; .tlr-section is the timelog report form. */
.hk-report-builder .hk-settings-ms,
.tlr-section .hk-settings-ms { max-width: none; }
.hk-report-builder .hk-settings-ms-trigger,
.hk-report-builder .hk-report-multi-trigger,
.hk-report-builder .hk-report-select,
.tlr-section .hk-settings-ms-trigger,
.tlr-section .hk-report-multi-trigger,
.tlr-section .hk-report-select {
  min-height: 2.875rem;
  box-sizing: border-box;
  border: 1px solid var(--hk-border-strong);
  border-radius: 4px;
  background: var(--hk-surface);
}
.hk-report-builder .hk-select-trigger:hover,
.hk-report-builder .hk-report-multi-trigger:hover,
.hk-report-builder .hk-settings-ms-trigger:hover,
.tlr-section .hk-select-trigger:hover,
.tlr-section .hk-report-multi-trigger:hover,
.tlr-section .hk-settings-ms-trigger:hover { border-color: var(--hk-text-3); }
.hk-report-builder .hk-report-multi-menu,
.hk-report-builder .hk-settings-ms-popover,
.hk-report-builder .hk-select-menu,
.tlr-section .hk-report-multi-menu,
.tlr-section .hk-settings-ms-popover,
.tlr-section .hk-select-menu { border-radius: 3px; }

.hk-newtask-row { display: grid; gap: 1rem; }
.hk-newtask-row-2 { grid-template-columns: 1fr 1fr; }
.hk-newtask-row-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Priority + due date on one line: pills take the flexible left column,
   the due date column is pinned flush to the modal's right edge. */
.hk-newtask-row-priority-due {
  grid-template-columns: 1fr minmax(240px, 320px);
  column-gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .hk-newtask-row-2,
  .hk-newtask-row-3,
  .hk-newtask-row-priority-due { grid-template-columns: 1fr; }
}
.hk-newtask-field {
  display: flex; flex-direction: column; gap: 0.4375rem;
  min-width: 0;
}
.hk-newtask-label {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hk-text-3);
  display: flex; align-items: center; gap: 0.25rem;
}
.hk-newtask-required { color: var(--hk-red); font-weight: 700; }
.hk-newtask-desc { resize: vertical; min-height: 6rem; }

.hk-newtask-attach-row {
  display: flex; align-items: center; gap: 0.4375rem;
  flex-wrap: wrap;
  margin-top: 0.4375rem;
}
.hk-newtask-attach-btn {
  background: var(--hk-surface);
  border: 1px solid var(--hk-border-strong);
  cursor: pointer;
  width: 1.875rem; height: 1.875rem;
  border-radius: 2px;
  color: var(--hk-text-2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hk-newtask-attach-btn:hover {
  background: var(--hk-surface);
  border-color: var(--hk-text-3);
  color: var(--hk-text);
}
.hk-newtask-attach-list { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.hk-newtask-attach-chip {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  background: var(--hk-bg);
  border: 1px solid var(--hk-border);
  border-radius: 999px;
  padding: 0.125rem 0.4375rem 0.125rem 0.625rem;
  font-size: 0.75rem;
  color: var(--hk-text);
  max-width: 14rem;
}
.hk-newtask-attach-chip > :nth-child(2) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hk-newtask-attach-x {
  background: none; border: none; cursor: pointer;
  color: var(--hk-text-3);
  padding: 0.125rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.hk-newtask-attach-x:hover { background: var(--hk-border); color: var(--hk-text); }

.hk-newtask-more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--hk-blue);
  padding: 0.25rem 0;
}
.hk-newtask-more:hover { text-decoration: underline; }
.hk-newtask-optional {
  display: flex; flex-direction: column; gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hk-border);
}
.hk-newtask-section-label {
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hk-text-3);
}
.hk-newtask-duration {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  max-width: 16rem;
}
.hk-newtask-foot {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.875rem 1.75rem;
  border-top: 1px solid var(--hk-border);
  background: var(--hk-bg);
  display: flex; justify-content: flex-end; gap: 0.5rem;
}
.hk-newtask-foot .hk-mkt-foot-btn { border-radius: 2px; }

/* ─── Date-time picker (DueDateField) ─── */
.hk-duedate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  border-radius: 8px;
  color: var(--hk-text-3);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.hk-duedate-btn:hover { background: var(--hk-surface-2); }
.hk-duedate-btn.open,
.hk-duedate-btn:focus-visible {
  outline: none;
  border-color: var(--hk-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hk-blue) 18%, transparent);
}
.hk-duedate-btn.has-value { color: var(--hk-text); }
.hk-duedate-icon { color: var(--hk-text-3); flex: 0 0 auto; }
.hk-duedate-btn.has-value .hk-duedate-icon { color: var(--hk-blue); }
.hk-duedate-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-duedate-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  color: var(--hk-text-3);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hk-duedate-clear:hover { background: var(--hk-surface-2); color: var(--hk-text); }
.hk-duedate-pop {
  position: fixed;
  z-index: 1200;
  width: 320px;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hk-duedate-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.hk-duedate-preset {
  padding: 0.3125rem 0.625rem;
  background: var(--hk-bg);
  border: 1px solid var(--hk-border);
  border-radius: 999px;
  color: var(--hk-text-2);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hk-duedate-preset:hover {
  background: color-mix(in srgb, var(--hk-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--hk-blue) 35%, var(--hk-border));
  color: var(--hk-blue);
}
.hk-duedate-preset.danger { color: var(--hk-text-3); }
.hk-duedate-preset.danger:hover {
  color: #d93025;
  border-color: color-mix(in srgb, #d93025 40%, var(--hk-border));
  background: color-mix(in srgb, #d93025 8%, transparent);
}
.hk-duedate-cal { padding: 0.25rem; }
.hk-duedate-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4375rem;
}
.hk-duedate-cal-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hk-text);
}
.hk-duedate-cal-nav {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--hk-text-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.hk-duedate-cal-nav:hover {
  background: var(--hk-surface-2);
  border-color: var(--hk-border);
}
.hk-duedate-cal-dow,
.hk-duedate-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.hk-duedate-cal-dow span {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--hk-text-3);
  padding: 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hk-duedate-cal-day {
  width: 100%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--hk-text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hk-duedate-cal-day:hover { background: var(--hk-surface-2); }
.hk-duedate-cal-day.today { font-weight: 700; color: var(--hk-blue); }
.hk-duedate-cal-day.selected {
  background: var(--hk-blue);
  color: #fff;
  font-weight: 600;
}
.hk-duedate-cal-day.selected:hover { background: var(--hk-blue); }
.hk-duedate-time {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.375rem 0.25rem;
  border-top: 1px solid var(--hk-border);
}
.hk-duedate-time-label {
  font-size: 0.75rem;
  color: var(--hk-text-3);
  margin-right: auto;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hk-duedate-time-wrap { position: relative; }
.hk-duedate-time-text.hk-mkt-input {
  width: 96px;
  padding: 0.3125rem 0.5rem;
  font-variant-numeric: tabular-nums;
}
.hk-duedate-time-text.hk-mkt-input.invalid {
  border-color: var(--hk-red);
  background: rgba(234, 67, 53, 0.10);
  color: var(--hk-red);
}
.hk-duedate-time-tip {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 0;
  background: #202124;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 61;
  pointer-events: none;
}
.hk-duedate-time-menu {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 0;
  min-width: 96px;
  max-height: 11rem;
  overflow-y: auto;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow-2);
  z-index: 60;
  padding: 0.25rem;
}
.hk-duedate-time-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.375rem 0.625rem;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--hk-text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.hk-duedate-time-option:hover { background: var(--hk-surface-2); }
.hk-duedate-time-option.on {
  background: color-mix(in srgb, var(--hk-blue) 12%, transparent);
  color: var(--hk-blue);
  font-weight: 600;
}
.hk-duedate-foot {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--hk-border);
  padding-top: 0.5rem;
}

/* ─── Scroll containment for the task modals (theme-v1) ───
   Stop a two-finger trackpad pan from "chaining" past the modal to the page
   behind it (Google-Calendar-style zero background movement). Applied to the
   UIkit overlay, its scrollable dialog and the form's scrolling body. */
#new-task-form-modal,
#new-crm-task-form-modal {
  overscroll-behavior: contain;
}

/* ─── View-task modal: pinned to the viewport (theme-v1) ───
   The dialog fills the overlay exactly and never scrolls as a whole —
   only the taskview body inside it scrolls. */
#view-subtask-form-modal {
  overflow-y: hidden;
  overscroll-behavior: contain;
}

/* Inside the view-task modal the close cross owns the top-right corner —
   drop the header toolbar lower and further left so the two don't crowd.
   (!important: the toolbar's position is set inline in task-view.vue.) */
#view-subtask-form-modal .hk-detail-toolbar {
  top: 2.8rem !important;
  right: 28px !important;
}

/* Close cross: quiet at rest, obvious on hover (Fluent-style) */
.hk-taskmodal-close:hover,
.hk-taskmodal-close:focus-visible {
  background: #f5f5f5 !important;
  outline: none;
}
.hk-taskmodal-close:hover svg path,
.hk-taskmodal-close:focus-visible svg path {
  stroke: #1a1a1a;
}
#new-task-form-modal .uk-modal-dialog,
#new-crm-task-form-modal .uk-modal-dialog,
.hk-newtask-body {
  overscroll-behavior: contain;
}

/* ─── Fixed-size modal: multi-value fields scroll, never grow (theme-v1) ───
   The assignees / followers / clients / contacts chip rows stay a single
   line and scroll horizontally as chips are added, so the field never gets
   "thicker" and the fixed-height modal never resizes (lite's ugmodal-lg). */
.hk-newtask-body .hk-settings-ms-trigger,
.hk-newtask-body .hk-report-multi-trigger { overflow: hidden; }
.hk-newtask-body .hk-settings-ms-values,
.hk-newtask-body .hk-report-multi-values {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.hk-newtask-body .hk-settings-ms-values::-webkit-scrollbar,
.hk-newtask-body .hk-report-multi-values::-webkit-scrollbar { height: 3px; }
.hk-newtask-body .hk-settings-ms-values::-webkit-scrollbar-thumb,
.hk-newtask-body .hk-report-multi-values::-webkit-scrollbar-thumb {
  background: var(--hk-border-strong);
  border-radius: 999px;
}
.hk-newtask-body .hk-settings-ms-chip,
.hk-newtask-body .hk-report-multi-chip { flex-shrink: 0; }

/* Thin 3px vertical scrollbar for the modal body (matches the chip rows). */
.hk-newtask-body {
  scrollbar-width: thin;
  scrollbar-color: var(--hk-border-strong) transparent;
}
.hk-newtask-body::-webkit-scrollbar { width: 3px; height: 3px; }
.hk-newtask-body::-webkit-scrollbar-track { background: transparent; }
.hk-newtask-body::-webkit-scrollbar-thumb {
  background: var(--hk-border-strong);
  border-radius: 999px;
}

/* ═══ New Task modal: lite header + ugmodal field refinements (theme-v1) ═══
   The dialog carries .hk-lite .hk-ugmodal .hk-ugmodal-lg so these mirror
   hotkup-lite's NewTaskModal exactly (left title + subtitle, round close
   button, white fields with the strong border and softened labels). */
.hk-ugmodal .hk-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  padding: 1.375rem 1.75rem;
  border-bottom: 1px solid var(--hk-border);
  flex-shrink: 0;
}
.hk-ugmodal .hk-modal-title {
  font-size: 1.1875rem; font-weight: 600; color: var(--hk-text);
  margin: 0; letter-spacing: -0.01em; line-height: 1.3;
}
.hk-ugmodal .hk-ugmodal-sub {
  font-size: 0.8125rem; color: var(--hk-text-3);
  margin: 0.1875rem 0 0; font-weight: 400;
}
/* Round icon close button — scoped to the modal so it overrides the
   sidebar's fixed-size .hk-icon-btn. */
.hk-ugmodal .hk-icon-btn {
  width: auto; height: auto;
  background: none; border: none; cursor: pointer;
  padding: 0.375rem; border-radius: 50%;
  color: var(--hk-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.hk-ugmodal .hk-icon-btn:hover { background: var(--hk-bg); color: var(--hk-text); }
.hk-ugmodal .hk-icon-btn.hk-sm { padding: 0.1875rem; }

/* Softened field labels (sentence case, not uppercase) like lite's ugmodal. */
.hk-ugmodal .hk-newtask-label {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--hk-text-2);
}
/* Crisp white text inputs with lite's padding / size (override the base
   .hk-mkt-input !important rules within the task modal only). */
.hk-ugmodal .hk-newtask-body .hk-mkt-input,
.hk-ugmodal .hk-newtask-body .hk-mkt-textarea {
  background: var(--hk-surface) !important;
  border: 1px solid var(--hk-border-strong) !important;
  border-radius: 4px !important;
  padding: 0.6875rem 0.875rem !important;
  font-size: 0.9375rem !important;
}
.hk-ugmodal .hk-newtask-body .hk-mkt-input:focus,
.hk-ugmodal .hk-newtask-body .hk-mkt-textarea:focus {
  background: var(--hk-surface) !important;
  border-color: var(--hk-blue) !important;
  box-shadow: 0 0 0 3px var(--hk-blue-light) !important;
}
/* Let the assignee/people picker fill its column in the wide modal. */
.hk-ugmodal-lg .hk-settings-ms { max-width: none; }

/* ─── Description label row: attach buttons pinned top-right, borderless ─── */
.hk-newtask-desc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
}
.hk-newtask-desc-actions {
  display: inline-flex; align-items: center; gap: 0.125rem;
}
/* Light, borderless icon buttons (override the bordered .hk-newtask-attach-btn
   and the ugmodal :is() border rule). */
.hk-newtask-attach-btn--plain,
.hk-ugmodal .hk-newtask-body .hk-newtask-attach-btn--plain {
  background: transparent !important;
  border: none !important;
  color: var(--hk-text-3);
}
.hk-newtask-attach-btn--plain:hover {
  background: var(--hk-bg) !important;
  border: none !important;
  color: var(--hk-text);
}

/* ═══ Workflow picker + Recurring Task modals (theme-v1) ═══
   Shared chrome for #task-from-template-modal and
   #recurring-task-from-template-modal: the hk-modal-header above, a
   two-column body with lite-styled list boxes / native selects, and the
   standard Cancel + primary footer. */
.hk-wfpick-form {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  width: 100%;
}
.hk-wfpick-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 1.25rem 1.75rem 1.5rem;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .hk-wfpick-body { grid-template-columns: 1fr; }
}
/* Multi-row list boxes (size="9") — white cards with lite borders. */
.hk-wfpick-list {
  min-height: 260px;
  box-sizing: border-box;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border-strong);
  border-radius: 4px;
  padding: 0.375rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--hk-text);
  outline: none;
}
.hk-wfpick-list:focus {
  border-color: var(--hk-blue);
  box-shadow: 0 0 0 3px var(--hk-blue-light);
}
.hk-wfpick-list option {
  padding: 0.4375rem 0.625rem;
  border-radius: 3px;
  cursor: pointer;
}
.hk-wfpick-list option:checked {
  background: var(--hk-blue-light);
  color: var(--hk-blue);
  font-weight: 600;
}
.hk-wfpick-list option:disabled { color: var(--hk-text-3); cursor: not-allowed; }
/* Single-line native selects (repeat frequency etc.) styled like hk inputs. */
.hk-wfpick-select {
  min-height: 2.875rem;
  box-sizing: border-box;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border-strong);
  border-radius: 4px;
  padding: 0.5rem 0.875rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--hk-text);
  outline: none;
  width: 100%;
}
.hk-wfpick-select:hover:not(:disabled) { border-color: var(--hk-text-3); }
.hk-wfpick-select:focus {
  border-color: var(--hk-blue);
  box-shadow: 0 0 0 3px var(--hk-blue-light);
}
.hk-wfpick-select:disabled {
  background: var(--hk-bg);
  color: var(--hk-text-3);
  cursor: not-allowed;
}

/* Generated cron expression readout in the Recurring Task form. */
.hk-rtask-cron {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4375rem;
  font-size: 0.8125rem;
  color: var(--hk-green, #188038);
}
.hk-rtask-cron-code {
  background: var(--hk-bg);
  border: 1px solid var(--hk-border);
  border-radius: 3px;
  padding: 0.1875rem 0.4375rem;
  font-size: 0.75rem;
}

/* ═══ Edit Task form (task-info-tab, theme-v1) ═══
   The form reuses the New Task modal's field classes but renders inline in
   the task view's slide-down panel, not in a fixed-height modal — so the
   body must not scroll-clip the picker popovers, and the footer sits flush
   with the panel background. */
.hk-taskedit .hk-newtask-body.hk-taskedit-body {
  flex: none;
  overflow: visible;
  padding: 1.25rem 1.75rem 1.5rem;
}
.hk-taskedit .hk-settings-ms { max-width: none; }
.hk-taskedit-foot {
  display: flex; align-items: center; gap: 0.5rem;
  padding-top: 1rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--hk-border);
}
.hk-taskedit-foot .hk-mkt-foot-btn { border-radius: 2px; }
.hk-taskedit-cancel-task {
  color: var(--hk-red) !important;
  border-color: var(--hk-border-strong) !important;
}
.hk-taskedit-cancel-task:hover:not(:disabled) {
  background: rgba(217, 48, 37, 0.06) !important;
}

/* Let the duration number-input / unit-select shrink inside their grid —
   grid children default to min-width:auto, which pushed the Edit Task modal
   into horizontal scroll when the pair sat in a narrow column. */
.hk-newtask-duration > * { min-width: 0; }

/* ══ Top-bar icon button (theme-v1) ═══════════════════════════════════
   Round hover target for the navbar bell — lite outline glyph inherits
   currentColor: grey at rest, blue when its panel is open. */
.hk-topbar-iconbtn {
  color: #5f6368 !important;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  background: none !important;
  transition: background 0.15s, color 0.15s;
}
.hk-topbar-iconbtn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #3c4043 !important;
}
.hk-topbar-iconbtn.on {
  color: #0f6cbd !important;
  background: rgba(15, 108, 189, 0.08) !important;
}

/* Unread-count pill on the navbar bell — ringed in the topbar colour so it
   reads as part of the button instead of a sticker on top of it. */
.hk-notif-badge {
  position: absolute;
  top: -1px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ef5350 0%, #d93025 100%);
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #F0F0F0, 0 1px 3px rgba(217, 48, 37, 0.35);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ══ Marketing blast / mailing-list cards (theme-v1) ══════════════════
   Compact two-line variant of the client card — these rows have no
   badge column, so drop the reserved right padding and min-height. */
.hk-clients-list-pane .list-row.hk-blast-card {
  padding: 0.625rem 0.875rem !important;
  min-height: 0;
}

/* Blast/mailing card typography — mirrors the client card's .hk-ct-name
   scale so the marketing pane reads like the rest of the app. */
.hk-blast-card .highlighted { row-gap: 0.1875rem !important; }
.hk-blast-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--hk-text);
  letter-spacing: -0.01em;
  line-height: 1.35;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.hk-blast-sno {
  flex: 0 0 auto;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  color: var(--ol-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.hk-blast-meta {
  font-size: 0.71875rem !important;
  font-weight: 400 !important;
  color: var(--hk-text-3);
  line-height: 1.3;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hk-blast-time {
  flex: 0 0 auto;
  font-size: 0.6875rem !important;
  font-weight: 400 !important;
  color: var(--hk-text-4);
  letter-spacing: 0.01em;
}

/* ═══ Marketing wizards — compact Outlook-style modal (theme-v1) ═══
   Shared chrome for the New Email Blast and New Mailing List wizards
   (marketing-template-wizard.vue / mailing-list-wizard.vue): a fixed
   compact dialog, a tinted step rail on the left (numbers only — no
   green check blobs), a scrollable content pane, and a footer with
   Back / Next / primary-save. The .hk-wiz-content overrides restyle the
   legacy UIkit + vue-multiselect widgets inside the step components so
   they read as lite without touching their logic. */
.uk-modal-dialog.hk-wiz-dialog {
  width: min(920px, 94vw);
  max-width: 94vw !important;
  height: min(680px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  background: var(--hk-surface, #fff);
  border-radius: 8px;
  box-shadow: 0 25px 57px rgba(0, 0, 0, 0.22);
}

.hk-wiz { flex: 1; min-height: 0; display: flex; }

/* Left step rail */
.hk-wiz-rail {
  width: 230px;
  flex-shrink: 0;
  padding: 1rem 0.75rem;
  background: #faf9f8;
  border-right: 1px solid var(--hk-border);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.hk-wiz-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s ease;
}
.hk-wiz-step:hover { background: var(--hk-surface-2); }
.hk-wiz-step.active { background: var(--ol-sel); }
.hk-wiz-dot {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--hk-border-strong);
  background: var(--hk-surface);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--hk-text-3);
}
.hk-wiz-step.active .hk-wiz-dot {
  background: var(--ol-accent);
  border-color: var(--ol-accent);
  color: #fff;
}
.hk-wiz-step.done .hk-wiz-dot {
  background: var(--ol-sel);
  border-color: var(--ol-accent);
  color: var(--ol-accent);
}
.hk-wiz-step-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hk-wiz-step-title { font-size: 0.8125rem; font-weight: 600; color: var(--hk-text-2); line-height: 1.3; }
.hk-wiz-step.active .hk-wiz-step-title { color: var(--ol-accent-deep); }
.hk-wiz-step-sub { font-size: 0.75rem; color: var(--hk-text-4); line-height: 1.35; }

/* Content pane + footer */
.hk-wiz-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
}
.hk-wiz-content::-webkit-scrollbar { width: 6px; }
.hk-wiz-content::-webkit-scrollbar-thumb { background: var(--hk-border-strong); border-radius: 999px; }
.hk-wiz-pane { display: flex; flex-direction: column; gap: 1.375rem; }
.hk-wiz-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  border-top: 1px solid var(--hk-border);
}
.hk-wiz-count { margin-right: auto; font-size: 0.75rem; color: var(--hk-text-4); }

/* Field primitives used by the rewritten step panes */
.hk-wiz-field { display: flex; flex-direction: column; gap: 0.375rem; }
.hk-wiz-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hk-wiz-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hk-text-2);
  letter-spacing: 0;
  text-transform: none;
}
.hk-wiz-hint { margin: -0.125rem 0 0.125rem; font-size: 0.75rem; color: var(--hk-text-4); line-height: 1.45; }
.hk-wiz-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ol-accent);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.hk-wiz-add-btn:hover { background: var(--ol-sel); color: var(--ol-accent-deep); }

/* ─── Overrides for the legacy widgets inside the step components ─── */

/* The step components' roots were built for the old absolutely-positioned
   layout (position:absolute; height:100%; padding-right:50px) — flatten
   them into normal flow (!important beats their inline styles). */
.hk-wiz-content .scroll_container {
  position: static !important;
  height: auto !important;
  width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Legacy UIkit labels: kill the uppercase letter-spaced look. */
.hk-wiz-content .uk-form-label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--hk-text-2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.hk-wiz-content .uk-form-label sup { color: var(--hk-red); }

/* Slim lite inputs (element selectors on purpose — the attachment rows
   reuse .uk-input on plain divs and must keep their auto height). */
.hk-wiz-content input.uk-input,
.hk-wiz-content select.uk-input,
.hk-wiz-content select.uk-select {
  height: 38px !important;
  background: var(--hk-surface) !important;
  border: 1px solid var(--hk-border-strong) !important;
  border-radius: 4px !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  color: var(--hk-text) !important;
  padding: 0 0.75rem !important;
  box-shadow: none !important;
}
.hk-wiz-content input.uk-input:focus,
.hk-wiz-content select.uk-input:focus,
.hk-wiz-content select.uk-select:focus {
  border-color: var(--hk-blue) !important;
  box-shadow: 0 0 0 3px var(--hk-blue-light) !important;
}
.hk-wiz-content input.uk-input:disabled,
.hk-wiz-content input.uk-input[readonly][disabled],
.hk-wiz-content select.uk-input:disabled,
.hk-wiz-content select.uk-select:disabled {
  background: var(--hk-surface-2) !important;
  color: var(--hk-text-3) !important;
  border-color: var(--hk-border) !important;
  cursor: not-allowed;
}

/* vue-multiselect (exclude / include email pickers) → lite look. */
.hk-wiz-content .multiselect { font-size: 0.875rem; color: var(--hk-text); }
.hk-wiz-content .multiselect__tags {
  min-height: 38px;
  padding: 5px 40px 0 5px;
  border: 1px solid var(--hk-border-strong);
  border-radius: 4px;
  font-size: 0.875rem;
}
.hk-wiz-content .multiselect--active .multiselect__tags {
  border-color: var(--hk-blue);
  box-shadow: 0 0 0 3px var(--hk-blue-light);
}
.hk-wiz-content .multiselect__tag {
  background: var(--ol-sel);
  color: var(--ol-accent-deep);
  border-radius: 3px;
  font-weight: 600;
  margin-bottom: 4px;
}
.hk-wiz-content .multiselect__tag-icon:after { color: var(--ol-accent-deep); }
.hk-wiz-content .multiselect__tag-icon:hover,
.hk-wiz-content .multiselect__tag-icon:focus { background: var(--ol-accent); }
.hk-wiz-content .multiselect__tag-icon:hover:after,
.hk-wiz-content .multiselect__tag-icon:focus:after { color: #fff; }
.hk-wiz-content .multiselect__input,
.hk-wiz-content .multiselect__single { font-size: 0.875rem; }
.hk-wiz-content .multiselect__placeholder {
  color: var(--hk-text-4);
  font-size: 0.875rem;
  padding-top: 3px;
  margin-bottom: 7px;
}
.hk-wiz-content .multiselect__content-wrapper {
  border: 1px solid var(--hk-border);
  border-radius: 0 0 4px 4px;
  box-shadow: var(--hk-shadow-2);
}
.hk-wiz-content .multiselect__option { font-size: 0.875rem; }
.hk-wiz-content .multiselect__option--highlight { background: var(--ol-sel); color: var(--hk-text); }
.hk-wiz-content .multiselect__option--highlight:after { background: transparent; color: var(--hk-text-3); }
.hk-wiz-content .multiselect__spinner:before,
.hk-wiz-content .multiselect__spinner:after { border-top-color: var(--ol-accent); }

/* The legacy step forms sit inside flex-row roots; make sure they always
   span the wizard pane. */
.hk-wiz-content .template-form {
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* ─── Tasks sidebar — Categories section (ported from lite's InboxNav:
   .hk-categories-header / .hk-categories-list / .hk-category-item /
   .hk-category-main, HotKupApp.css lines 558-610). Scoped to
   .task-module-container so the clients/contacts sidebars (which use the
   .hk-clients-nav variants above) are unaffected. Pin toggle and per-
   category counts intentionally omitted. Literal values because this rail
   sits outside the .hk-lite token scope:
   --hk-text #202124 / --hk-text-2 #3c4043 / --ol-hover #e8e6e3 /
   --ol-accent #0f6cbd (22% on white = #cadff0, 28% = #bcd6ed). ─── */

.task-module-container .hk-categories-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 1rem !important;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #3c4043 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: left;
  transition: background 0.15s;
}
.task-module-container .hk-categories-header:hover {
  background: #e8e6e3 !important;
}

/* The submenu list flows freely; rows are lite's .hk-category-item. */
.task-module-container #category-submenu .category-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 !important;
  margin: 0;
}
.task-module-container .hk-category-item {
  display: flex;
  align-items: center;
  margin: 1px 0.5rem !important;
  padding: 0 !important;
  border-radius: 6px;
  color: #3c4043;
  transition: background 0.15s, color 0.15s;
}
.task-module-container .hk-category-item:hover {
  background: #e8e6e3 !important;
  color: #202124;
}
.task-module-container .hk-category-item.selected-menu,
.task-module-container .hk-category-item.uk-active {
  background: #cadff0 !important; /* color-mix(#0f6cbd 22%, #fff) */
  color: #0f6cbd !important;
  font-weight: 600;
}
.task-module-container .hk-category-item.selected-menu:hover,
.task-module-container .hk-category-item.uk-active:hover {
  background: #bcd6ed !important; /* color-mix(#0f6cbd 28%, #fff) */
}
.task-module-container .hk-category-item > a.hk-category-main {
  flex: 1;
  min-width: 0;
  padding: 0.375rem 0.25rem 0.375rem 1rem !important;
  margin: 0 !important;
  background: none !important;
  border: none;
  cursor: pointer;
  font-size: 0.75rem !important;
  color: inherit !important;
  font-weight: inherit !important;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: none !important;
}
.task-module-container .hk-category-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Numbers next to categories removed (element kept for the count JS). */
.task-module-container .hk-category-item .counter-label {
  display: none !important;
}

/* ─── Wizard extras (theme-v1, round 2) ─── */

/* Compact borderless attach/upload button (step 3 of the blast wizard). */
.hk-wiz-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ol-accent);
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.hk-wiz-attach-btn:hover { background: var(--ol-sel); color: var(--ol-accent-deep); }

/* Grey out a control that has no native disabled state (hk-due-date). */
.hk-wiz-disabled { pointer-events: none; opacity: 0.55; }

.hk-wiz-label sup { color: var(--hk-red); }

.hk-wiz-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ol-accent);
  cursor: pointer;
  text-decoration: none;
}
.hk-wiz-link:hover { color: var(--ol-accent-deep); text-decoration: underline; }

/* ─── Contacts dropdown (mailing list wizard, step 2): inline search +
   "All contacts" master checkbox + client-grouped checkbox rows. ─── */
.hk-contacts-dd { position: relative; }
.hk-contacts-dd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 38px;
  padding: 0 0.75rem;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--hk-text);
  cursor: pointer;
  text-align: left;
}
.hk-contacts-dd-trigger:hover { border-color: var(--hk-text-3); }
.hk-contacts-dd.open .hk-contacts-dd-trigger {
  border-color: var(--hk-blue);
  box-shadow: 0 0 0 3px var(--hk-blue-light);
}
.hk-contacts-dd-caret { color: var(--hk-text-3); flex-shrink: 0; display: inline-flex; }
.hk-contacts-dd-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--hk-surface);
  border: 1px solid var(--hk-border);
  border-radius: 4px;
  box-shadow: var(--hk-shadow-2);
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow: hidden;
}
.hk-contacts-dd-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--hk-border);
  color: var(--hk-text-3);
  flex-shrink: 0;
}
.hk-contacts-dd-search input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--hk-text);
  padding: 0;
}
.hk-contacts-dd-search input::placeholder { color: var(--hk-text-4); }
.hk-contacts-dd-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  color: var(--hk-text);
  cursor: pointer;
  margin: 0;
  min-width: 0;
}
.hk-contacts-dd-row:hover { background: var(--hk-surface-2); }
.hk-contacts-dd-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--ol-accent);
  cursor: pointer;
}
.hk-contacts-dd-all {
  border-bottom: 1px solid var(--hk-border);
  font-weight: 600;
  flex-shrink: 0;
}
.hk-contacts-dd-list { overflow-y: auto; padding: 0.25rem 0; }
.hk-contacts-dd-list::-webkit-scrollbar { width: 6px; }
.hk-contacts-dd-list::-webkit-scrollbar-thumb { background: var(--hk-border-strong); border-radius: 999px; }
.hk-contacts-dd-group {
  padding: 0.4375rem 0.75rem 0.125rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hk-text-4);
}
.hk-contacts-dd-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-contacts-dd-email {
  margin-left: auto;
  color: var(--hk-text-3);
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}
.hk-contacts-dd-empty { padding: 0.75rem; font-size: 0.8125rem; color: var(--hk-text-4); }

/* ===== Detail-pane "nothing selected" empty state (ported from HotKup empty-state designs) ===== */
.hk-empty {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.hk-empty svg { overflow: visible; }
.hk-empty h3 {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 600;
  color: #20242C;
  letter-spacing: -.3px;
}
.hk-empty p {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 400;
  color: #8A93A3;
  letter-spacing: -.1px;
}
@keyframes hk-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hk-floaty2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes hk-flap { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) {
  .hk-empty [style*="animation"] { animation: none !important; }
}

/* ══ Liquid-glass pane head chip (July 2026) ═══════════════════════════
   The floating translucent head used on every detail-tab pane (first
   built for the client Tasks tab). Apply .hk-glass-head to the pane's
   head row; optionally add .hk-glass-under to the scroll region that
   follows so its content slides beneath the chip and frosts through. */
/* Flattened (Apple sub-page pass): the header is no longer a floating
   frosted pill — it's a plain row whose separation comes from the
   component's own bottom hairline (.tktab-head / .tkrem-head / etc.). */
.hk-glass-head {
  position: relative;
  z-index: 3;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.hk-glass-under {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── Mechanical head alignment (task detail page) ──
   Every pane-head chip inside .tk-tab-panes is positioned by THIS rule
   alone. The !important margins beat each component's own rules AND
   inline styles, so heads defined in task-view, tab-reminders,
   task-files-tab — or any future tab — cannot drift individually.
   Change these three numbers and every head moves together. */
.tk-tab-panes .hk-glass-head {
  margin: 4px 32px 12px !important;
}

/* ══ Marketing page — window compression (theme-v1) ════════════════════
   The Pass-2 rules above pin the lite rail (214px) and the list pane
   (22rem) at every window size, so shrinking the window used to squeeze
   only the detail pane until the layout clipped; the marketing page's
   own @container rules target the legacy .side-menu-container markup
   and no longer match anything. Scoped to .hk-mkt-home (the marketing
   home root — the same element that declares the side-bar-container
   size container in its scoped styles) so Tasks/Clients/Calendar keep
   their fixed columns. Three compression stages:
   1. always       — the detail pane may shrink to nothing (min-width:0),
                     so the page never overflows sideways;
   2. under ~1260px — the list pane tracks the window continuously
                     (clamp 15–22rem) instead of holding 22rem;
   3. under 1000px  — the rail folds to an icon strip (labels, counters
                     and the split-button caret hide), animated by the
                     transition below. */
.hk-mkt-home .task-detail-container {
  min-width: 0 !important;
  overflow-x: hidden;
}
.hk-mkt-home .hk-empty svg { max-width: 100%; height: auto; }

/* 28cqw matches the pane's old 22rem share of a ~1260px window: the
   clamp caps at 22rem on wide windows (no visual change there) and
   glides down to 15rem as the window narrows — continuous, no snap. */
.app_container.hk-mkt-home .list-of-tasks-container.hk-clients-list-pane {
  width: clamp(15rem, 28cqw, 22rem) !important;
  min-width: clamp(15rem, 28cqw, 22rem) !important;
  max-width: 22rem !important;
  flex: 0 0 clamp(15rem, 28cqw, 22rem) !important;
}

/* Animate the rail's fold to/from the icon strip (stage 3). */
.app_container.hk-mkt-home .app-side-menu:has(.hk-clients-nav),
.app_container.hk-mkt-home .side-bar-light.hk-clients-nav {
  transition: width 0.2s ease, min-width 0.2s ease,
              max-width 0.2s ease, flex-basis 0.2s ease;
}

@container side-bar-container (max-width: 1000px) {
  .app_container.hk-mkt-home .app-side-menu:has(.hk-clients-nav) {
    flex: 0 0 3.25rem !important;
    width: 3.25rem !important;
    min-width: 3.25rem !important;
  }
  .app_container.hk-mkt-home .side-bar-light.hk-clients-nav {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 3.25rem !important;
    padding: 0.75rem 0.375rem 1rem !important;
  }
  .hk-mkt-home .hk-clients-folder-label,
  .hk-mkt-home .hk-clients-nav .counter-label,
  .hk-mkt-home .hk-lite .hk-newbtn-label,
  .hk-mkt-home .hk-lite .hk-new-report-caret { display: none !important; }
  .hk-mkt-home .hk-clients-nav .hk-clients-folder { justify-content: center; }
  .hk-mkt-home .hk-lite .hk-new-report-btn { padding: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Reports rail — Apple skin (from "Task Report (Apple)" mockup).
   Scoped to .hk-reports-nav.hk-lite so the marketing rail and other
   hk-new-report users keep their Fluent look. Appended last so equal-or-
   higher specificity rules here win over the Fluent pass above.
   ═══════════════════════════════════════════════════════════════════════ */
.side-bar-light.hk-reports-nav.hk-lite {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #F5F5F7;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

/* New Report button/caret keep their base Fluent look (no Apple override) */

.hk-reports-nav.hk-lite .new_task_options.hk-new-report-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
}
.hk-reports-nav.hk-lite .new_task_options.hk-new-report-menu .menu {
  background: transparent;
  border: none;
  box-shadow: none;
}
.hk-reports-nav.hk-lite .new_task_options.hk-new-report-menu .menu > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px !important;
  border-radius: 8px;
  font-size: 13px !important;
  font-weight: 500;
  color: #1D1D1F !important;
}
.hk-reports-nav.hk-lite .new_task_options.hk-new-report-menu .menu > div:hover {
  background: rgba(0, 122, 255, 0.08) !important;
  color: #1D1D1F !important;
}
.hk-reports-nav.hk-lite .new_task_options.hk-new-report-menu .menu > div .lnr,
.hk-reports-nav.hk-lite .new_task_options.hk-new-report-menu .menu > div .fa {
  color: #6E6E73;
}

.hk-reports-nav.hk-lite .hk-reports-nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86868B;
}
.hk-reports-nav.hk-lite .hk-reports-nav-sublabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6E6E73;
}
.hk-reports-nav.hk-lite .hk-reports-nav-empty {
  font-size: 13px;
  color: #86868B;
}
.hk-reports-nav.hk-lite li.saved-report-item { border-radius: 8px; }
.hk-reports-nav.hk-lite li.saved-report-item:hover {
  background: rgba(0, 122, 255, 0.06) !important;
}
.hk-reports-nav.hk-lite li.saved-report-item.report-selected,
.hk-reports-nav.hk-lite li.saved-report-item.report-selected:hover,
.hk-reports-nav.hk-lite li.saved-report-item.report-selected:active {
  background: rgba(0, 122, 255, 0.1) !important;
}
.hk-reports-nav.hk-lite .hk-reports-nav-item {
  font-size: 13px;
  color: #1D1D1F;
}
.hk-reports-nav.hk-lite li.saved-report-item.report-selected .hk-reports-nav-item {
  color: #007AFF;
}

/* ═══════════════════════════════════════════════════════════════════════
   Contacts & Clients rails — Apple skin (contacts-sidebar mockup).
   Scoped to .hk-crm-nav (set only on contacts-home / clients-home rails)
   so the reports, calendar, and marketing rails keep their Fluent look.
   The New Contact/Client button keeps its existing --ol-accent color;
   only its shape changes to the mockup's pill. Appended last so ties on
   specificity resolve in this block's favor.
   ═══════════════════════════════════════════════════════════════════════ */
.side-bar-light.hk-clients-nav.hk-crm-nav {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #F5F5F5 !important;
  padding: 0.875rem 0.875rem 1rem !important;
}

/* Primary action keeps the base .hk-new-task-btn look (no pill override) */
.hk-crm-nav .hk-new-client-btn { margin-bottom: 14px; }

/* Nav rows */
.hk-crm-nav .hk-clients-nav-list {
  gap: 4px;
  margin-bottom: 0 !important;
}
.hk-crm-nav .hk-clients-folder,
.hk-crm-nav .uk-nav > li > a.hk-clients-folder {
  gap: 10px;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1C1C1E !important;
  border-radius: 10px;
}
.hk-crm-nav .hk-clients-folder:hover {
  background: rgba(120, 120, 128, 0.12) !important;
  color: #1C1C1E !important;
}
.hk-crm-nav li.uk-active > .hk-clients-folder,
.hk-crm-nav li.selected-menu > .hk-clients-folder {
  background: rgba(0, 122, 255, 0.12) !important;
  color: #007AFF !important;
  font-weight: 600 !important;
}
.hk-crm-nav li.uk-active > .hk-clients-folder:hover,
.hk-crm-nav li.selected-menu > .hk-clients-folder:hover {
  background: rgba(0, 122, 255, 0.16) !important;
  color: #007AFF !important;
}

/* CATEGORIES section header */
.hk-crm-nav .hk-categories-header,
.hk-crm-nav a.hk-categories-header {
  gap: 8px;
  padding: 18px 12px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.7px;
  color: rgba(60, 60, 67, 0.55) !important;
}

/* Category rows — dot instead of icon */
.hk-crm-nav .hk-clients-cat-list { gap: 2px; }
.hk-crm-nav .hk-clients-folder.hk-clients-cat { padding: 7px 12px !important; }
.hk-crm-nav .hk-clients-cat-dot {
  width: 8px;
  height: 8px;
}

/* Connection status — pinned to the bottom of the rail */
.hk-crm-nav .hk-crm-toast {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: #248A3D;
  background: rgba(52, 199, 89, 0.14);
  border: 1px solid rgba(52, 199, 89, 0.2);
  border-radius: 12px;
  padding: 9px 12px;
  flex-shrink: 0;
}
.hk-crm-nav .hk-crm-toast-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34C759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
  flex-shrink: 0;
}