/* Dashboard adapter for the portable HK Group design system. */
body { font-size: var(--font-body-size); }
body:has(.dashboard-shell) {
  /* Raise or lower this value to change the orange background wash. */
  --hk-background-orange-strength: .15;
  background: var(--hk-bg); isolation: isolate;
}
body:has(.dashboard-shell)::before,
body:has(.dashboard-shell)::after { content: ""; position: fixed; pointer-events: none; }
body:has(.dashboard-shell)::before {
  inset: -8px; z-index: -2;
  background: url("../images/dash-background.580eca4a31d0.webp") center -110px / cover no-repeat;
  filter: blur(3px); opacity: .62;
}
body:has(.dashboard-shell)::after {
  inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 12% 65%, rgb(238 153 34 / var(--hk-background-orange-strength)), transparent 65%), radial-gradient(ellipse at 95% 15%, rgb(238 153 34 / var(--hk-background-orange-strength)), transparent 70%), linear-gradient(120deg, rgba(255,250,243,.38), rgba(255,247,234,.48));
}
button, input, select, textarea { font-family: var(--font-family); }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--hk-accent-ink); outline-offset: 5px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--orange); }
.dashboard-shell {
  /* Lower this value to reveal more of the image through every dashboard panel. */
  --hk-panel-opacity: .54;
  --hk-dashboard-glass: linear-gradient(145deg,
    rgb(255 255 255 / var(--hk-panel-opacity)) 0%,
    rgb(255 250 241 / var(--hk-panel-opacity)) 48%,
    rgb(246 237 224 / var(--hk-panel-opacity)) 100%);
  --hk-dashboard-border: var(--frame-border);
  --hk-dashboard-shadow: var(--glass-card-shadow);
  --hk-dashboard-blur: var(--hk-blur-nav);
  background: transparent; padding: 20px; gap: 24px; grid-template-columns: 248px minmax(0, 1fr); }
.dash-sidebar { top: 20px; height: calc(100dvh - 40px); border: var(--hk-dashboard-border); border-radius: var(--hk-radius-nav); background: var(--hk-dashboard-glass); box-shadow: var(--hk-dashboard-shadow); backdrop-filter: var(--hk-dashboard-blur); -webkit-backdrop-filter: var(--hk-dashboard-blur); scrollbar-width: thin; scrollbar-color: var(--hk-line) transparent; }
.dash-logo { padding: 28px 20px 24px; border-bottom: 1px solid var(--hk-line); margin: 0 8px 18px; }
.sidebar-logo-img { width: 100%; max-width: 208px; height: auto; }
.dash-nav { gap: 6px; padding: 0 12px; }
.dash-nav a { min-height: 44px; height: auto; padding-block: 11px; color: var(--ink); font-weight: 600; font-size: 13px; border-radius: var(--hk-radius-control); transition: background var(--hk-transition), color var(--hk-transition); }
.dash-nav a.is-active { color: var(--orange); background: rgba(238,153,34,.15); border-left-color: var(--orange); }
.dash-nav a:hover:not(.is-active) { color: var(--orange); background: rgba(255,253,249,.8); border-left-color: var(--orange); }
.dash-nav a.is-active .nav-badge, .nav-badge { color: var(--orange); }
.support-card { border: var(--frame-border); border-radius: var(--hk-radius-card); background: var(--glass-card-background); color: var(--ink); }
.support-card strong { color: var(--ink); }
.support-card p, .support-icon, .support-btn { color: var(--orange); }
.support-btn { background: rgba(238,153,34,.12); }
.support-btn:hover { background: var(--orange); color: var(--ink); }
.dash-main { background: transparent; }
.dash-topbar { top: 20px; padding: 14px 24px; min-height: 76px; border: var(--hk-dashboard-border); border-radius: var(--hk-radius-nav); background: var(--hk-dashboard-glass); box-shadow: var(--hk-dashboard-shadow); backdrop-filter: var(--hk-dashboard-blur); -webkit-backdrop-filter: var(--hk-dashboard-blur); }
.dash-topbar h1 { font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.dashboard-content { padding: 28px 0 12px; gap: 24px; }
.welcome-row h2, .cpd-page-title { font-family: var(--font-heading); font-size: var(--font-main-heading-size); font-weight: var(--font-main-heading-weight); line-height: 1.04; letter-spacing: -.025em; }
.welcome-row p { color: var(--hk-muted); line-height: 1.6; margin-top: 10px; }
.glass-card { border: var(--hk-dashboard-border); border-radius: var(--hk-radius-card); background: var(--hk-dashboard-glass); box-shadow: var(--hk-dashboard-shadow); backdrop-filter: var(--hk-dashboard-blur); -webkit-backdrop-filter: var(--hk-dashboard-blur); }
.glass-card h3, .cpd-section-title, .cpd-card-title { font-family: var(--font-heading); font-size: var(--font-subheading-size); font-weight: var(--font-subheading-weight); }
.metric-value, .metric-card strong { font-variant-numeric: tabular-nums; }
.search-box, .date-pill, .icon-button, .filter-btn, .proj-filter-btn, .proj-download-btn { border-color: var(--hk-line); border-radius: var(--hk-radius-control); background: var(--hk-surface); }
.search-box input { min-width: 0; width: 100%; }
.profile-menu { background: var(--hk-surface); border-radius: var(--hk-radius-card); box-shadow: var(--glass-card-shadow); }
.login-form > button, .btn-primary, .cpd-btn-save { border: 1px solid var(--white); border-radius: var(--hk-radius-control); background: var(--orange); box-shadow: var(--action-shadow); font-weight: 600; }
/* Keep the website's light branding legible over the login photograph. */
.auth-page { --auth-page-bg: var(--hk-bg); --auth-ink: var(--ink); --auth-muted: var(--hk-muted); --auth-card: var(--glass-card-background); --auth-card-border: rgba(255,255,255,.86); --auth-card-shadow: var(--glass-card-shadow); --auth-input-bg: var(--hk-surface); --auth-input-border: var(--hk-line); --auth-divider: var(--hk-line); background: var(--hk-background); }
.auth-brand { align-self: flex-start; padding: 18px 22px; border: var(--frame-border); border-radius: var(--hk-radius-nav); background: var(--glass-card-background); box-shadow: var(--hk-shadow-nav); backdrop-filter: var(--hk-blur-nav); -webkit-backdrop-filter: var(--hk-blur-nav); }
.auth-brand .auth-logo-img { max-width: 100%; width: 210px; }
.auth-panel { border: var(--frame-border); border-radius: var(--hk-radius-nav); backdrop-filter: var(--hk-blur-card); -webkit-backdrop-filter: var(--hk-blur-card); }
.auth-copy h1, .auth-panel h2 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.025em; }
.auth-panel h2 { font-size: var(--font-main-heading-size); line-height: 1.04; }
.auth-page[data-theme="dark"] { background: var(--auth-page-bg); }
.auth-page[data-theme="dark"] .auth-panel { border-color: var(--auth-card-border); }
.auth-page[data-theme="light"] .auth-admin a, .auth-page[data-theme="light"] .auth-label-row a { color: var(--orange); }
@supports not (backdrop-filter: blur(1px)) { .dash-sidebar, .dash-topbar { background: var(--hk-surface); } }
@media (max-width: 1100px) and (min-width: 681px) {
  .dashboard-shell { padding: 14px; gap: 16px; grid-template-columns: 210px minmax(0, 1fr); }
  .dash-sidebar { top: 14px; height: calc(100dvh - 28px); }
  .dash-topbar { top: 14px; flex-wrap: wrap; padding: 14px 18px; }
  .dash-tools { flex-wrap: wrap; }
  .search-box { width: 180px; min-width: 0; }
}
@media (max-width: 680px) {
  .dashboard-shell { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 16px; }
  .dash-sidebar { position: static; height: auto; padding-bottom: 12px; }
  .dash-logo { padding: 16px 12px; margin-bottom: 12px; }
  .sidebar-logo-img { max-width: 190px; }
  .dash-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .dash-nav a { flex: 0 0 auto; white-space: nowrap; }
  .support-card { display: none; }
  .dash-topbar { position: relative; top: 0; padding: 18px; gap: 14px; }
  .dash-tools { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .search-box { width: 100%; }
  .dashboard-content { padding-top: 8px; }
  .welcome-row h2, .cpd-page-title { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.dashboard-shell .welcome-row h2 { font-size: var(--font-main-heading-size); font-weight: var(--font-main-heading-weight); }
.dashboard-shell .panel-head h3 { font-size: var(--font-subheading-size); font-weight: var(--font-subheading-weight); }
.dashboard-content > *, .glass-card, .logs-body-grid > *, .proj-body-grid > *, .cpd-layout > * { min-width: 0; }
.panel-head { flex-wrap: wrap; }
@media (max-width: 1100px) {
  .dashboard-shell .dashboard-grid, .dashboard-shell .lower-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Contain wide data tables without widening the page. */
.clients-table-wrap, .req-table-wrap { max-width: 100%; overflow-x: auto; }
.am-header-btns, .cpd-action-bar, .cpd-action-right { flex-wrap: wrap; }
.svc-hero-stats { max-width: 100%; }
@media (max-width: 680px) {
  .am-hero-layout { grid-template-columns: minmax(0, 1fr); }
  .am-hero-layout > * { min-width: 0; }
  .am-header-row { flex-wrap: wrap; }
  .dashboard-shell .welcome-row h2 { font-size: 36px; }
  .cpd-action-right { gap: 8px; }
}
@media (max-width: 1100px) {
  .proj-body-grid, .proj-analytics-grid { grid-template-columns: minmax(0, 1fr); }
  .donut-row { flex-wrap: wrap; }
}
.svc-detail-grid > *, .svc-detail-2col > * { min-width: 0; }
@media (max-width: 680px) {
  .svc-detail-grid, .svc-detail-2col { grid-template-columns: minmax(0, 1fr); }
}

/* Use the website header's glass surface and corner radius for every card. */
.dashboard-shell :is(.glass-card, .task-card, .support-card, .nc-preview-card, .cpd-identity-card, .cpd-form-card, .cpd-summary-card, .cpd-comm-card, .cpd-activity-card, .cpd-docs-card) {
  border: var(--hk-dashboard-border);
  border-radius: var(--hk-radius-card);
  background: var(--hk-dashboard-glass);
  box-shadow: var(--hk-dashboard-shadow);
  backdrop-filter: var(--hk-dashboard-blur);
  -webkit-backdrop-filter: var(--hk-dashboard-blur);
}
@supports not (backdrop-filter: blur(1px)) {
  .dashboard-shell :is(.glass-card, .task-card, .support-card, .nc-preview-card, .cpd-identity-card, .cpd-form-card, .cpd-summary-card, .cpd-comm-card, .cpd-activity-card, .cpd-docs-card) { background: var(--hk-surface); }
}

/* On narrow screens, show the architectural illustration instead of its empty center. */
@media (max-width: 680px) {
  body:has(.dashboard-shell)::before { background-position: 20% -70px; background-size: auto calc(100vh + 70px); }
}

@media (min-width: 681px) and (max-aspect-ratio: 16/9) {
  body:has(.dashboard-shell)::before { background-position: center top; }
}

/* Compact request summaries: name and service on the left, status and date on the right. */
.dashboard-shell .requests-panel .request-list { gap: 0; }
.dashboard-shell .requests-panel .request-item--summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid rgba(210,170,119,.32);
}
.dashboard-shell .requests-panel .request-item--summary:last-child { border-bottom: 0; }
.request-item__main { flex: 1 1 auto; min-width: 0; }
.dashboard-shell .requests-panel .request-item__main strong { margin: 0 0 4px; line-height: 1.3; overflow-wrap: anywhere; }
.dashboard-shell .requests-panel .request-item__main p { line-height: 1.35; }
.request-item__meta { display: flex; flex: 0 0 auto; align-items: flex-end; flex-direction: column; gap: 5px; }
.dashboard-shell .requests-panel .request-item__meta .status-badge { display: inline-flex; align-items: center; width: auto; max-width: 100%; border-radius: 999px; padding: 4px 10px; line-height: 1.2; }
.dashboard-shell .requests-panel .request-item__meta time { color: var(--hk-muted); font-size: 11px; }
@media (max-width: 420px) {
  .dashboard-shell .requests-panel .request-item--summary { gap: 8px; }
  .request-item__meta { flex-shrink: 1; text-align: right; }
  .dashboard-shell .requests-panel .request-item__meta time { white-space: normal; }
}

/* Typography and navigation consume the website globals throughout the dashboard. */
.dashboard-shell { color: var(--ink); font-family: var(--font-family); font-weight: var(--font-body-weight); }
.dashboard-shell :is(h1, h2, h3, h4) { font-family: var(--font-heading); font-weight: var(--font-subheading-weight); color: var(--ink); }
.dashboard-shell :is(.clients-page-title, .cpd-page-title, .welcome-row h2, .svc-detail-title) { font-size: var(--font-main-heading-size); font-weight: var(--font-main-heading-weight); line-height: 1.04; letter-spacing: -.025em; }
.dashboard-shell :is(.panel-head h3, .am-section-title, .cpd-card-title) { font-size: var(--font-subheading-size); }
.dashboard-shell .dash-nav a { color: var(--ink); }
.dashboard-shell .dash-nav a:is(.is-active, :hover) { color: var(--orange); }

/* Website button and outlined icon language, shared across dashboard pages. */
.dashboard-shell :is(button, a[class*="btn"], a[class*="button"]) { font-family: var(--font-family); }
.dashboard-shell :is(.add-client-btn, .am-btn-accent, .nc-btn-save, .cpd-btn-save, .btn-primary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--white); border-radius: var(--hk-radius-control);
  background: var(--orange); color: var(--white); box-shadow: var(--action-shadow);
  font: 600 14px/1.3 var(--font-family);
  transition: transform var(--hk-transition), box-shadow var(--hk-transition);
}
.dashboard-shell :is(.add-client-btn, .am-btn-accent, .nc-btn-save, .cpd-btn-save, .btn-primary):hover:not(:disabled) {
  background: var(--orange); color: var(--white); transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(238,153,34,.30);
}
.dashboard-shell :is(.filter-btn, .download-btn, .proj-filter-btn, .am-btn-outline, .nc-btn-cancel, .cpd-btn-cancel, .cpd-btn-more, .page-btn, .date-pill) {
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius-control);
  background: var(--hk-surface); color: var(--ink);
  font-family: var(--font-family); font-weight: 600;
  transition: border-color var(--hk-transition), color var(--hk-transition), background var(--hk-transition);
}
.dashboard-shell :is(.filter-btn, .download-btn, .proj-filter-btn, .am-btn-outline, .nc-btn-cancel, .cpd-btn-cancel, .cpd-btn-more, .page-btn, .date-pill):hover:not(:disabled) {
  border-color: var(--orange); color: var(--orange); background: #fff1df;
}
.dashboard-shell :is(.back-btn, .icon-button, .action-btn, .proj-more-btn, .proj-download-btn, .support-btn, .cpd-doc-btn, .am-order-expand, .nc-close) {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius-control);
  background: var(--hk-surface); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--white), 0 3px 10px rgba(76,61,43,.07);
  transition: color var(--hk-transition), background var(--hk-transition), border-color var(--hk-transition), transform var(--hk-transition);
}
.dashboard-shell :is(.back-btn, .icon-button, .action-btn, .proj-more-btn, .proj-download-btn, .support-btn, .cpd-doc-btn, .am-order-expand, .nc-close):hover:not(:disabled) {
  color: var(--orange); border-color: var(--orange); background: #fff1df; transform: translateY(-2px);
}
.dashboard-shell :is(.back-btn, .icon-button, .action-btn, .proj-more-btn, .proj-download-btn, .support-btn, .cpd-doc-btn, .am-order-expand, .nc-close) svg {
  width: var(--hk-icon-size); height: var(--hk-icon-size);
  fill: none; stroke: currentColor; stroke-width: var(--hk-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.dashboard-shell :is(.metric-icon, .task-card-icon, .act-icon, .support-icon, .service-icon-box, .svc-deliverable-icon, .am-contact-icon) {
  display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid rgba(238,153,34,.22); border-radius: var(--hk-radius-control);
  background: rgba(238,153,34,.12); color: var(--orange);
}
.dashboard-shell :is(.metric-icon, .task-card-icon, .act-icon, .support-icon, .service-icon-box, .svc-deliverable-icon, .am-contact-icon) svg,
.dashboard-shell .dash-nav svg {
  width: var(--hk-icon-size); height: var(--hk-icon-size);
  fill: none; stroke: currentColor; stroke-width: var(--hk-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.dashboard-shell .dash-nav a span { width: 28px; height: 28px; border: 1px solid rgba(238,153,34,.18); border-radius: 5px; background: rgba(255,253,249,.6); }
.dashboard-shell .dash-nav a.is-active span { border-color: rgba(238,153,34,.32); background: rgba(238,153,34,.12); }
.dashboard-shell .dash-nav a span svg { width: 16px; height: 16px; }
.dashboard-shell :is(.back-btn, .action-btn, .proj-more-btn, .support-btn) { text-decoration: none; }
.dashboard-shell :is(.action-delete-btn, .request-delete-btn, .cpd-btn-delete):hover { color: var(--hk-danger); border-color: var(--hk-danger); }

/* The website pairs charcoal display headings with restrained orange accents. */
.dashboard-shell .welcome-row h2 em {
  color: var(--orange);
  font-style: normal;
}
.dashboard-shell .panel-head h3::after {
  content: "";
  display: block;
  width: 31px;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--orange);
}
@media (max-width: 680px) {
  .dashboard-shell .welcome-row h2 { font-size: 32px; }
}