/* NextDesk client portal visual system.
   Loaded last so every portal surface shares one coherent hierarchy. */
:root {
  --nd-font: Manrope, "Segoe UI", Arial, sans-serif;
  --nd-navy-950: #061b32;
  --nd-navy-900: #0a2942;
  --nd-navy-800: #103851;
  --nd-teal-700: #087a72;
  --nd-teal-600: #078c82;
  --nd-teal-100: #e6f5f2;
  --nd-ink: #102f49;
  --nd-copy: #365268;
  --nd-muted: #687e90;
  --nd-line: #d3e0e8;
  --nd-line-strong: #bdceda;
  --nd-canvas: #f2f6f8;
  --nd-surface: #ffffff;
  --nd-soft: #f7fafb;
  --nd-radius-sm: 8px;
  --nd-radius: 12px;
  --nd-radius-lg: 16px;
  --nd-shadow: 0 10px 30px rgba(8, 38, 61, .055);
  --navy: var(--nd-navy-900);
  --teal: var(--nd-teal-600);
  --line: var(--nd-line);
  --muted: var(--nd-muted);
  --soft: var(--nd-soft);
}

html, body, button, input, select, textarea, dialog { font-family: var(--nd-font); }
html { color: var(--nd-ink); background: var(--nd-canvas); font-synthesis: none; text-rendering: optimizeLegibility; }
body { min-width: 320px; background: var(--nd-canvas); color: var(--nd-ink); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { line-height: 1.4; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid rgba(7, 140, 130, .18); outline-offset: 2px; }

/* Shell and navigation */
.portal-shell { grid-template-columns: 252px minmax(0, 1fr); background: var(--nd-canvas); }
.portal-shell > aside { isolation: isolate; overflow: hidden; padding: 22px 16px; background: linear-gradient(165deg, #0d3852 0%, #082940 54%, #061e35 100%); box-shadow: 8px 0 28px rgba(5, 27, 47, .08); }
.portal-shell > aside::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .32; background: radial-gradient(circle at 112% 8%, rgba(71, 207, 193, .34), transparent 28%), repeating-radial-gradient(ellipse at 110% 6%, transparent 0 25px, rgba(116, 220, 209, .14) 26px 27px); }
.brand { display: grid; gap: 10px; padding: 0 8px 20px; border-bottom: 1px solid rgba(218, 235, 242, .14); }
.brand-surface { display: grid; width: 188px; height: 48px; place-items: center start; padding: 0; overflow: hidden; border: 0; background: transparent; box-shadow: none; }
.brand .brand-surface img { width: 168px; max-height: 42px; margin: 0; filter: brightness(0) invert(1); object-fit: contain; object-position: left center; }
.brand > span:last-child { color: #bcd1dd; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.portal-shell nav { display: grid; gap: 5px; padding-top: 17px; }
.portal-shell nav button { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; color: #c9d9e2; font-size: 13px; font-weight: 650; text-align: left; transform: none; }
.portal-shell nav button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.portal-shell nav button:hover { border-color: rgba(211, 235, 239, .1); background: rgba(255, 255, 255, .07); box-shadow: none; color: #fff; transform: none; }
.portal-shell nav button.active { border-color: rgba(98, 206, 194, .3); background: linear-gradient(90deg, rgba(16, 156, 145, .26), rgba(255, 255, 255, .07)); color: #fff; }
.portal-shell nav button.active::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -1px; width: 3px; border-radius: 0 3px 3px 0; background: #69d6cb; }
.portal-shell nav b { display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 6px; border-radius: 999px; background: #e8f7f4; color: #087a72; font-size: 10px; font-weight: 800; }
.portal-shell .account { border-top-color: rgba(218, 235, 242, .14); }

/* Workspace and universal hierarchy */
.workspace { min-height: 100dvh; padding: 28px clamp(22px, 3.1vw, 48px) 0; background: linear-gradient(180deg, #f1f6f9 0, #f6f9fb 260px, #f2f6f8 100%); }
.workspace > header, .workspace > .flash, .workspace > .panel-view, .workspace > footer { width: min(100%, 1360px); margin-right: auto; margin-left: auto; }
.workspace > header { min-height: 66px; margin-bottom: 18px; padding: 0 2px 14px; border-bottom: 1px solid rgba(189, 207, 219, .72); }
.workspace > header h1 { color: var(--nd-navy-950); font-size: clamp(25px, 2vw, 30px); font-weight: 750; letter-spacing: -.035em; }
.eyebrow { margin-bottom: 6px; color: var(--nd-teal-700); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.card, .case-directory, .portal-knowledge-heading, .portal-knowledge-layout, .portal-case-journey { border-color: var(--nd-line); border-radius: var(--nd-radius-lg); background: var(--nd-surface); box-shadow: var(--nd-shadow); }
.card-head { min-height: 72px; padding: 17px 20px; border-bottom-color: var(--nd-line); }
.card-head h2, .portal-knowledge-heading h2, .case-directory-heading h2 { color: var(--nd-ink); font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.subtle { color: var(--nd-muted); font-size: 12px; line-height: 1.5; }
.badge { min-height: 26px; padding: 6px 10px !important; border: 1px solid #cce5e1; background: #e8f6f3; color: #08766d; font-size: 10px; font-weight: 800; }
.badge.warn { border-color: #ead7a9; background: #fff5dc; color: #805b13; }
.empty, .portal-knowledge-empty, .case-directory-empty { color: var(--nd-muted); }

/* Buttons and form controls */
button { min-height: 40px; padding: 9px 14px; border-radius: var(--nd-radius-sm); background: var(--nd-teal-600); box-shadow: none; font-size: 13px; font-weight: 750; }
button:hover:not(:disabled) { background: var(--nd-teal-700); color: #fff; box-shadow: 0 7px 18px rgba(7, 122, 114, .15); transform: translateY(-1px); }
#loginView .link-button,
#loginView .link-button:hover:not(:disabled),
#loginView .link-button:active:not(:disabled) { min-height: auto; border: 0; background: transparent; box-shadow: none; color: #687b8e; transform: none; }
#loginView .link-button:hover:not(:disabled) { color: var(--nd-teal-700); text-decoration-color: currentColor; }
#loginView .link-button:focus-visible { background: transparent; box-shadow: none; color: var(--nd-teal-700); text-decoration-color: currentColor; transform: none; }
.secondary, .portal-back, .case-directory-clear, .case-directory-pagination button { border: 1px solid var(--nd-line-strong); background: #fff; color: var(--nd-ink); }
.secondary:hover:not(:disabled), .portal-back:hover:not(:disabled), .case-directory-clear:hover:not(:disabled), .case-directory-pagination button:hover:not(:disabled) { border-color: #8ebeb9; background: #f1f8f7; color: #086f67; box-shadow: none; transform: none; }
input, select, textarea { min-height: 44px; border-color: var(--nd-line-strong); border-radius: 9px; padding: 11px 13px; background: #fff; color: var(--nd-ink); font-size: 13px; }
input::placeholder, textarea::placeholder { color: #8a9ba8; }
input:focus, select:focus, textarea:focus { border-color: var(--nd-teal-600); outline: 3px solid rgba(7, 140, 130, .11); }
label { gap: 6px; color: #29475d; font-size: 12px; font-weight: 750; }
.form-card { max-width: 1120px; overflow: hidden; }
.form-card .card-head { background: linear-gradient(90deg, #f5fbfa, #fff); }
.form-card form { padding: 22px; }
.attachment-field { border-color: #b9d3dc; background: #f6fafb; }
.actions { margin-top: 20px; }

/* Dashboard */
.portal-command-center { gap: 14px; }
.portal-welcome { padding: 22px 24px; border-color: #c6ddd9; border-radius: var(--nd-radius-lg); background: linear-gradient(120deg, #fff 0%, #f5fbfa 66%, #e8f6f3 100%); box-shadow: var(--nd-shadow); }
.portal-welcome h2 { color: var(--nd-navy-950); font-weight: 750; }
.portal-global-search > label { color: #34536a; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.portal-search-control { min-height: 50px; border-color: var(--nd-line-strong); border-radius: var(--nd-radius); box-shadow: var(--nd-shadow); }
.portal-quick-actions button { min-height: 76px; border-color: var(--nd-line); border-radius: var(--nd-radius); background: #fff; color: var(--nd-ink); }
.portal-quick-actions button > span { border-radius: 10px; background: var(--nd-teal-100); color: var(--nd-teal-700); }
.portal-quick-actions button:hover:not(:disabled) { border-color: #8fc9c3; background: #f3faf8; color: var(--nd-ink); box-shadow: 0 8px 22px rgba(8, 70, 69, .08); transform: translateY(-1px); }
.portal-quick-actions button:hover:not(:disabled) > span { background: #d8f0ec; color: #066f68; }
.portal-attention { border-radius: var(--nd-radius); }
.portal-attention:hover:not(:disabled):not(.is-calm) { border-color: #e3b763; background: #fff7e8; color: var(--nd-ink); box-shadow: 0 8px 20px rgba(100, 69, 7, .07); transform: none; }
.portal-search-results button:hover:not(:disabled), .portal-search-results button:focus-visible { background: #eff8f7; color: var(--nd-ink); box-shadow: inset 3px 0 0 var(--nd-teal-600); transform: none; }
.metrics { gap: 12px; }
.metric { border-top: 3px solid #8bd2ca; }
.metric span { font-size: 11px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.metric strong { color: var(--nd-navy-900); font-size: 25px; }

/* Case directory and detail */
.case-directory { box-shadow: var(--nd-shadow); }
.case-directory-heading { padding: 20px 20px 15px; }
.case-directory-scopes, .case-directory-filters, .case-directory-result, .case-directory-pagination { border-color: var(--nd-line); }
.case-directory-filters { background: #f5f8fa; }
.case-directory-columns { background: #eaf2f5; color: #536c7e; }
.case-directory-row { color: var(--nd-ink); }
.case-directory-row:nth-child(odd) { background: #fff; }
.case-directory-row:nth-child(even) { background: #f7fafb; }
.case-directory-row:hover:not(:disabled), .case-directory-row:focus-visible { background: #edf8f6; color: var(--nd-ink); box-shadow: inset 3px 0 0 var(--nd-teal-600); transform: none; }
.case-directory-scopes button:hover:not(:disabled) { border-color: #d2e5e2; background: #f2f8f7; color: #275064; box-shadow: none; transform: none; }
.case-directory-scopes button.active, .case-directory-scopes button.active:hover:not(:disabled) { border-color: #9acfc9; background: #e8f5f3; color: #087e75; box-shadow: none; transform: none; }
.case-directory-scopes button.active b, .case-directory-scopes button.active:hover b { background: #087e75; color: #fff; }
.case-directory-ticket b { color: #0a3a56; }
.case-detail-title { color: var(--nd-navy-950); font-weight: 750 !important; }
.fact { border: 1px solid #e0e9ee; background: #f6f9fa; }
.fact span { font-size: 10px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.timeline article { border-left-color: #55bdb2; }
.portal-case-journey { box-shadow: var(--nd-shadow); }
.case-section h3, .portal-work-heading h3 { font-weight: 750; }

/* Unified authorizations */
.approvals-card { overflow: hidden; }
.approvals-card > .card-head { background: linear-gradient(90deg, #f7fbfb, #fff); }
.approval-total { border-color: #c7e1dd; background: #eaf6f4; color: #08766d; }
.approval-table th { height: 38px; background: #eaf2f5; color: #536c7e; font-size: 9px; letter-spacing: .08em; }
.approval-table td { height: 68px; border-top-color: var(--nd-line); }
.approval-table tbody tr:nth-child(even) { background: #f7fafb; }
.approval-table tbody tr:hover { background: #ecf7f5; }
.approval-directory-row:focus-visible { background: #e5f3f1; }
.approval-reference strong, .approval-diagnosis strong { color: var(--nd-ink); font-size: 13px; font-weight: 700; }
.approval-reference span, .approval-diagnosis span, .approval-date { color: var(--nd-muted); font-size: 11px; }
.approval-type { font-size: 10px; }
.approval-open { min-height: 34px; padding: 7px 10px; }
.approval-open-view { min-width: 66px; }
.approval-pagination { background: #f7fafb; border-top-color: var(--nd-line); }
.approval-pagination button:hover:not(:disabled) { border-color: #8ebeb9; background: #eef8f6; color: #086f67; box-shadow: none; transform: none; }
.approval-summary-grid > div { background: #fff; }
.approval-items th { background: #f3f7f8; }
.approval-response-card { box-shadow: var(--nd-shadow); }

/* Knowledge, chat, notices and security */
.portal-knowledge-heading, .portal-knowledge-layout { box-shadow: var(--nd-shadow); }
.portal-knowledge-list button { border-bottom-color: var(--nd-line); color: var(--nd-ink); font: inherit; }
.portal-knowledge-list button:hover:not(:disabled), .portal-knowledge-list button.active { background: #eaf6f4; color: #086f67; box-shadow: inset 3px 0 0 var(--nd-teal-600); transform: none; }
.portal-chat-launch:hover:not(:disabled), .portal-chat-launch:active { border-color: #9fc9c4; background: #f4faf9; color: var(--nd-ink); box-shadow: none; transform: none; }
.portal-knowledge-reader { color: var(--nd-copy); }
.portal-chat-dialog, .portal-chat-dialog button, .service-notice-dialog, .portal-security-dialog { font-family: var(--nd-font); }
.portal-chat-dialog > section, .portal-security-dialog, .service-notice-dialog { border-radius: 16px; box-shadow: 0 24px 70px rgba(6, 31, 50, .24); }
.portal-chat-dialog > section > header, .security-heading { background: linear-gradient(125deg, #0b344e, #075366); }
.portal-chat-history { background: #f6f9fa; }
.portal-chat-message { font-family: var(--nd-font); }
.service-notice-card { padding: 30px; }
.service-notice-icon { border-radius: 14px; }
.portal-security-dialog { color: var(--nd-ink); }
.security-content { color: var(--nd-copy); }
.security-section h3 { color: var(--nd-ink); font-weight: 750; }
.flash { border: 1px solid #c9e4df; background: #eaf7f4; color: #076e66; box-shadow: var(--nd-shadow); }
.workspace > footer { color: #78909f; font-size: 10px; }

/* Login belongs to the same system while retaining its editorial layout. */
#loginView.login-shell { font-family: var(--nd-font); }
#loginView .login-card { border-color: var(--nd-line); border-radius: 20px; box-shadow: 0 24px 70px rgba(8, 38, 61, .14); }
#loginView .login-card h2 { color: var(--nd-navy-950); font-weight: 750; }
#loginView .login-story .eyebrow, #loginView .login-card .eyebrow { color: var(--nd-teal-700); }

@media (max-width: 1050px) {
  .portal-shell { grid-template-columns: 226px minmax(0, 1fr); }
  .approval-table { min-width: 860px; }
}

@media (max-width: 820px) {
  .portal-shell { display: block; }
  .portal-shell > aside { position: sticky; z-index: 100; top: 0; height: auto; padding: 10px 12px 9px; box-shadow: 0 8px 22px rgba(5, 27, 47, .14); }
  .brand { display: flex; align-items: center; gap: 10px; padding: 0 2px 9px; }
  .brand-surface { width: 128px; height: 34px; padding: 0; box-shadow: none; }
  .brand .brand-surface img { width: 122px; max-height: 28px; }
  .brand > span:last-child { font-size: 10px; }
  .portal-shell > aside nav { display: flex; gap: 5px; overflow-x: auto; padding: 0 0 1px; scrollbar-width: none; }
  .portal-shell > aside nav::-webkit-scrollbar { display: none; }
  .portal-shell > aside nav button { display: inline-flex; flex: 0 0 auto; width: auto; min-height: 38px; padding: 8px 10px; font-size: 11px; white-space: nowrap; }
  .portal-shell > aside nav button svg { width: 16px; height: 16px; }
  .portal-shell > aside nav button.active::before { display: none; }
  .portal-shell > aside .account { display: none; }
  .workspace { padding: 20px 14px 0; }
  .workspace > header { min-height: 58px; }
  .workspace > header h1 { font-size: 24px; }
  .portal-heading { align-items: flex-start; }
  .card-head { min-height: 66px; padding: 15px 16px; }
  .form-card form { padding: 17px 16px; }
  .portal-welcome { padding: 18px; }
  .approval-table { min-width: 760px; }
}

@media (max-width: 560px) {
  .portal-shell > aside nav button span { display: none; }
  .portal-shell > aside nav button { justify-content: center; min-width: 40px; padding: 8px; }
  .portal-shell > aside nav button svg { width: 19px; height: 19px; }
  .portal-shell > aside nav button b { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 8px; }
  .workspace { padding-right: 10px; padding-left: 10px; }
  .portal-welcome { border-radius: 14px; }
  .portal-welcome h2 { font-size: 24px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: 14px; }
  .service-notice-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}