/* Chloé shared typography. Weight tokens are defined once in the hierarchy below. */
/* Asset register filter button alignment */
.register-tools .refresh {
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 15px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.register-tools .refresh span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
  transform: translateY(0) !important;
}

.register-tools input,
.register-tools select,
.register-tools .refresh,
.register-tools .register-clear {
  box-sizing: border-box !important;
  align-self: center !important;
}

@media (max-width: 800px) {
  .register-tools .refresh {
    width: 100% !important;
    border-radius: 10px !important;
  }
}

/*
 * Unified Chloé button typography
 * Uses a lighter SF Pro weight, compact rhythm and consistent modern corners.
 */
button,
.button,
.tool-button,
.btn,
.refresh,
.register-clear,
.manage,
.side-link,
.header-signout,
.signout,
.action-panel button,
.action-panel a,
.register a {
  font-family: var(--font-sf) !important;

  letter-spacing: -.008em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.button,
.tool-button,
.btn,
.refresh,
.register-clear,
.manage,
.side-link,
.header-signout,
.action-panel button,
.action-panel a,
.register a,
button[type="submit"],
.add-device,
.primary-action {
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(26, 39, 56, .06) !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.button:hover,
.tool-button:hover,
.btn:hover,
.refresh:hover,
.register-clear:hover,
.manage:hover,
.side-link:hover,
.header-signout:hover,
.action-panel button:hover,
.action-panel a:hover,
.register a:hover,
button[type="submit"]:hover,
.add-device:hover,
.primary-action:hover {
  box-shadow: 0 5px 14px rgba(26, 39, 56, .10) !important;
  transform: translateY(-1px);
}

.button:active,
.tool-button:active,
.btn:active,
.refresh:active,
.register-clear:active,
.manage:active,
.side-link:active,
.header-signout:active,
.action-panel button:active,
.action-panel a:active,
.register a:active,
button[type="submit"]:active,
.add-device:active,
.primary-action:active {
  box-shadow: 0 1px 2px rgba(26, 39, 56, .05) !important;
  transform: translateY(0);
}

/*
 * Chloe official palette reset - 28 August 2026
 * Source references: the approved pastel RARE artwork and blue pearl glow artwork.
 * Brand accents are intentionally soft; semantic success/warning/danger colors are preserved.
 */
:root {
  --chloe-navy: #10234A;
  --chloe-sky: #9BC6FB;
  --chloe-ice-blue: #B4D7EF;
  --chloe-silver-blue: #9CC3E7;
  --chloe-steel-blue: #7FA3CF;
  --chloe-deep-steel: #5E7EAD;
  --chloe-periwinkle: #B3BBF5;
  --chloe-violet: #948DF7;
  --chloe-violet-strong: #735CFB;
  --chloe-lavender: #DDB9EE;
  --chloe-lilac: #DBABE7;
  --chloe-blush: #EEB8E4;
  --chloe-rose: #F6BEDC;
  --chloe-pink-soft: #FDC8DB;
  --chloe-peach: #FDCAC5;
  --chloe-pearl: #F4E8F9;
  --chloe-white: #FFFFFF;

  /* Compatibility aliases used by older Chloe styles. */
  --chloe-page: #F8FAFD;
  --chloe-soft: #F7F5FB;
  --chloe-line: rgba(127, 163, 207, .30);
  --chloe-line-strong: rgba(94, 126, 173, .42);
  --chloe-ink: var(--chloe-navy);
  --chloe-text: #263650;
  --chloe-muted: #66758C;
  --chloe-red: var(--chloe-violet-strong);
  --chloe-cyan: var(--chloe-sky);
  --chloe-blue: var(--chloe-steel-blue);
  --chloe-silver: #C9D7E6;

  --chloe-brand-gradient: linear-gradient(
    100deg,
    #9BC6FB 0%,
    #B3BBF5 24%,
    #948DF7 43%,
    #DDB9EE 61%,
    #EEB8E4 78%,
    #FDCAC5 100%
  );
  --chloe-accent-gradient: linear-gradient(
    110deg,
    #735CFB 0%,
    #948DF7 34%,
    #DDB9EE 58%,
    #F6BEDC 80%,
    #FDCAC5 100%
  );
  --chloe-brand-gradient-soft: linear-gradient(
    120deg,
    rgba(155, 198, 251, .18),
    rgba(179, 187, 245, .14) 30%,
    rgba(221, 185, 238, .14) 58%,
    rgba(246, 190, 220, .13) 82%,
    rgba(253, 202, 197, .12)
  );
  --chloe-pearl-gradient: linear-gradient(
    145deg,
    #FFFFFF 0%,
    #F7FAFD 24%,
    #E7F1F9 43%,
    #FFFFFF 58%,
    #F4E8F9 78%,
    #FFFFFF 100%
  );
  --chloe-shadow: 0 22px 58px rgba(52, 72, 105, .12);
  --chloe-shadow-soft: 0 10px 28px rgba(52, 72, 105, .08);
}

html {
  background: #F8FAFD !important;
  scrollbar-color: #9CC3E7 #F8FAFD !important;
}

body {
  color: var(--chloe-text) !important;
  background:
    radial-gradient(circle at 0% 100%, rgba(155, 198, 251, .28), transparent 38rem),
    radial-gradient(circle at 0% 0%, rgba(221, 185, 238, .18), transparent 32rem),
    radial-gradient(circle at 100% 0%, rgba(253, 202, 197, .18), transparent 34rem),
    radial-gradient(circle at 100% 100%, rgba(246, 190, 220, .15), transparent 36rem),
    linear-gradient(155deg, #FFFFFF 0%, #F8FAFD 58%, #F7F3FA 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  background-image: radial-gradient(circle, rgba(127, 163, 207, .08) 1px, transparent 1.2px) !important;
}

::selection {
  background: rgba(179, 187, 245, .42) !important;
  color: var(--chloe-navy) !important;
}

h1, h2, h3, h4, h5, h6,
.hero-copy h1,
.hero-copy h1 span,
.signed-user strong,
.user-mini strong {
  color: var(--chloe-navy) !important;
}

a {
  color: #5E7EAD;
}
a:hover {
  color: #735CFB;
}

.app-header,
.topbar {
  border-color: rgba(127, 163, 207, .26) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 9px 26px rgba(52, 72, 105, .08) !important;
  backdrop-filter: blur(22px) saturate(120%) !important;
}

.content {
  background:
    radial-gradient(circle at 10% 8%, rgba(155, 198, 251, .15), transparent 32rem),
    radial-gradient(circle at 92% 6%, rgba(238, 184, 228, .10), transparent 30rem),
    linear-gradient(155deg, rgba(255,255,255,.88), rgba(248,250,253,.94)) !important;
}

.register-hero,
.onboarding-hero,
.queue-head,
.request-title,
.tool-hero,
.hero,
.auth-identity {
  border-color: rgba(127, 163, 207, .25) !important;
  background:
    radial-gradient(circle at 10% 88%, rgba(155, 198, 251, .20), transparent 38%),
    radial-gradient(circle at 84% 18%, rgba(253, 202, 197, .15), transparent 36%),
    radial-gradient(circle at 55% 18%, rgba(221, 185, 238, .12), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,250,253,.93) 60%, rgba(244,232,249,.48)) !important;
}

.auth-shell > .card,
.summary-card,
.device-register,
.form-section,
.queue-panel,
.request-card,
.tool-panel,
.panel,
.card,
.metric,
.asset-choice,
.workflow-strip,
.detail,
.asset-option,
.assignment-card,
.accessory-editor,
.accessory-row,
.action-panel {
  border-color: rgba(127, 163, 207, .26) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.985), rgba(248,250,253,.965)) !important;
  box-shadow: var(--chloe-shadow-soft) !important;
}

.eyebrow,
.section-label,
.tool-kicker,
.assignment-kicker,
.nav-section {
  color: #735CFB !important;
}

.hero-badges span,
.auth-status {
  border-color: rgba(179, 187, 245, .38) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,232,249,.54)) !important;
  color: var(--chloe-navy) !important;
}

.hero-badges span:first-child::before,
.auth-status::before,
.live-dot {
  background: linear-gradient(135deg, #9BC6FB, #948DF7, #F6BEDC) !important;
  box-shadow: 0 0 0 4px rgba(179, 187, 245, .16), 0 0 12px rgba(148, 141, 247, .28) !important;
}

.signed-user,
.header-signout,
.signout {
  border-color: rgba(127, 163, 207, .30) !important;
  background: linear-gradient(145deg, #FFFFFF, rgba(244, 232, 249, .42)) !important;
  color: var(--chloe-navy) !important;
}

.signed-user:hover,
.header-signout:hover,
.signout:hover {
  border-color: #9BC6FB !important;
  background: linear-gradient(145deg, #FFFFFF, rgba(155, 198, 251, .18), rgba(238, 184, 228, .12)) !important;
  color: #5E7EAD !important;
}

.user-avatar,
.avatar {
  border-color: rgba(155, 198, 251, .46) !important;
  background: linear-gradient(145deg, #FFFFFF, rgba(180, 215, 239, .46), rgba(244, 232, 249, .54)) !important;
  color: #5E7EAD !important;
}

input,
select,
textarea {
  border-color: rgba(127, 163, 207, .42) !important;
  background: rgba(255,255,255,.97) !important;
  color: var(--chloe-text) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #948DF7 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(179, 187, 245, .28) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #735CFB !important;
}

.button,
.tool-button,
.btn,
.refresh,
.register-clear,
.manage,
.side-link,
.header-signout,
.signout,
.queue-tools a,
.tool-hero-actions a,
.action-panel a,
.action-panel button,
.register a {
  border-color: rgba(127, 163, 207, .34) !important;
  background: linear-gradient(145deg, #FFFFFF, #F8FAFD) !important;
  color: var(--chloe-navy) !important;
}

.button:hover,
.tool-button:hover,
.btn:hover,
.refresh:hover,
.register-clear:hover,
.manage:hover,
.side-link:hover,
.header-signout:hover,
.signout:hover,
.queue-tools a:hover,
.tool-hero-actions a:hover,
.action-panel a:hover,
.action-panel button:hover,
.register a:hover {
  border-color: #9BC6FB !important;
  background: linear-gradient(135deg, rgba(155,198,251,.18), rgba(221,185,238,.12), rgba(255,255,255,.98)) !important;
  color: #5E7EAD !important;
}

.button.primary,
.tool-button.primary,
.btn-primary,
.btn.primary,
.primary-action,
.add-device,
button[type="submit"],
input[type="submit"] {
  border-color: #735CFB !important;
  background: linear-gradient(110deg, #735CFB 0%, #948DF7 40%, #DDB9EE 68%, #EEB8E4 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 9px 22px rgba(115, 92, 251, .22) !important;
}

.button.primary:hover,
.tool-button.primary:hover,
.btn-primary:hover,
.btn.primary:hover,
.primary-action:hover,
.add-device:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  border-color: #735CFB !important;
  background: linear-gradient(110deg, #735CFB 0%, #948DF7 38%, #DDB9EE 66%, #F6BEDC 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 26px rgba(115, 92, 251, .28) !important;
  filter: brightness(1.025) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(155, 198, 251, .65) !important;
  outline-offset: 2px !important;
}

.summary-card:hover,
.summary-card.active,
.choice:hover,
.choice:has(input:checked) {
  border-color: rgba(148, 141, 247, .45) !important;
  background: var(--chloe-brand-gradient-soft) !important;
}

.summary-card.active {
  box-shadow: inset 0 3px 0 #948DF7, var(--chloe-shadow-soft) !important;
}

.choice:has(input:checked) {
  box-shadow: inset 3px 0 0 #948DF7 !important;
}

tbody tr:hover td,
.tool-table tr:hover td,
.queue-table tr:hover td {
  background: linear-gradient(90deg, rgba(155,198,251,.11), rgba(221,185,238,.08), rgba(246,190,220,.06)) !important;
}
tbody tr:hover {
  box-shadow: inset 3px 0 0 #9BC6FB !important;
}

thead th,
.tool-table th,
.queue-table th {
  border-color: rgba(127, 163, 207, .26) !important;
  background: linear-gradient(180deg, #FFFFFF, rgba(180, 215, 239, .18)) !important;
  color: #44546C !important;
}

.action-panel i.violet,
.summary-icon.violet {
  border-color: rgba(148, 141, 247, .34) !important;
  background: rgba(179, 187, 245, .18) !important;
  color: #735CFB !important;
}

.action-panel i.cyan,
.summary-icon.cyan {
  border-color: rgba(155, 198, 251, .42) !important;
  background: rgba(180, 215, 239, .22) !important;
  color: #5E7EAD !important;
}

.action-panel i.navy,
.summary-icon.navy,
.nav-icon {
  border-color: rgba(127, 163, 207, .30) !important;
  background: rgba(156, 195, 231, .14) !important;
  color: #5E7EAD !important;
}

.action-panel a:hover i,
.action-panel a:focus i,
.nav a:hover .nav-icon,
.nav a.active .nav-icon {
  border-color: rgba(148, 141, 247, .38) !important;
  background: linear-gradient(145deg, rgba(179,187,245,.22), rgba(238,184,228,.14)) !important;
  color: #735CFB !important;
}

.nav a:hover,
.nav a.active,
.nav a[aria-current="page"],
.sidebar .nav a.active {
  border-color: rgba(148, 141, 247, .34) !important;
  background: var(--chloe-brand-gradient-soft) !important;
  color: var(--chloe-navy) !important;
}

.refresh .chloe-icon,
.manage .chloe-icon,
.nav-icon,
.signout .chloe-icon {
  color: #5E7EAD !important;
}

.auth-shell > .card .register a,
.auth-shell > .card .back a,
.forgot-link,
.forgot-password,
.chloe-footer-links a {
  color: #5E7EAD !important;
}

.auth-shell > .card .register a:hover,
.auth-shell > .card .back a:hover,
.forgot-link:hover,
.forgot-password:hover,
.chloe-footer-links a:hover {
  color: #735CFB !important;
}

/* Preserve status meaning while harmonising the register's "available" state with the approved blue palette. */
.status-available-for-allocation,
.status-pill.available,
.badge.available {
  border-color: rgba(155, 198, 251, .48) !important;
  background: rgba(180, 215, 239, .28) !important;
  color: #4E719F !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
  }
}

/*
 * Central Chloe typography system - September 2026
 *
 * SF Pro Text and SF Pro Display are the first-choice Chloé families.
 * They are selected through the operating system where legally and technically
 * available. No Apple font files are embedded or distributed; other platforms
 * use native UI sans-serif fallbacks so text remains readable and functional.
 */
:root {
  --font-chloe-text: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-chloe-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Backward-compatible aliases for existing Chloé component styles. */
  --font-sf-text: var(--font-chloe-text);
  --font-sf-display: var(--font-chloe-display);
  --font-sf: var(--font-chloe-text);
  --font-system-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-weight-regular: var(--font-weight-body);
  --font-weight-medium: var(--font-weight-interface);
  --font-weight-semibold: var(--font-weight-emphasis);
  --line-height-heading: 1.2;
  --line-height-body: 1.5;
  --line-height-control: 1.25;
}

html {
  font-family: var(--font-chloe-text);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea,
option,
optgroup,
table,
caption {
  font-family: var(--font-chloe-text) !important;
  font-optical-sizing: auto;
}

body {
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.hero-copy h1,
.onboarding-hero h1,
.queue-head h1,
.request-title h1,
.tool-hero h1,
.register-head h2,
.registerHead h2,
.tool-panel-head h2,
.section-head h2,
.panel-head h2,
.panelHead h2,
.queue-panel h3,
.request-card h2,
.device-register h2,
.auth-shell > .card h1,
.modal h2,
.modalHead h2 {
  font-family: var(--font-chloe-display) !important;

  line-height: var(--line-height-heading);
  font-optical-sizing: auto;
}

.brand-copy strong,
.brandCopy strong,
.brand-title,
.brandTitle,
.auth-wordmark strong {
  font-family: var(--font-chloe-display) !important;
}

.nav a,
.nav-section,
.navSection,
.side-link,
button,
.button,
.tool-button,
.btn,
.refresh,
.register-clear,
.manage,
.header-signout,
.signout,
.action-panel button,
.action-panel a,
.introActions button,
.register a {
  line-height: var(--line-height-control) !important;
}

.metric-value,
.metricValue,
.summary-card strong,
.summaryCard strong,
.stats-card strong,
.statsCard strong,
.count,
.total {
  font-variant-numeric: tabular-nums;
}

pre,
code,
kbd,
samp,
.peripheral-code {
  font-family: var(--font-system-mono) !important;
}

/* Icon and symbol classes intentionally retain their own font-family rules. */

/*
 * Refined Chloe typography hierarchy - September 2026.
 * One weight hierarchy for the existing shared and page-specific components.
 * Legacy component declarations consume these tokens instead of competing values.
 * Keep contrast, sizes and geometry independent from weight.
 */
:root {
  --font-weight-body: 400;
  --font-weight-interface: 500;
  --font-weight-emphasis: 600;
  --font-weight-statistic: 600;
}

body,
input,
select,
textarea,
option,
optgroup {
  font-weight: var(--font-weight-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.dashboard-workspace-header h1,
.hero h1,
.hero-copy h1,
.onboarding-hero h1,
.queue-head h1,
.request-title h1,
.tool-hero h1,
.register-head h2,
.registerHead h2,
.tool-panel-head h2,
.section-head h2,
.panel-head h2,
.panelHead h2,
.queue-panel h3,
.request-card h2,
.device-register h2,
.auth-shell > .card h1,
.modal h2,
.modalHead h2,
.action-panel h3,
.dashboard-copy strong {
  font-weight: var(--font-weight-interface) !important;
}

.brand-copy strong,
.brandCopy strong,
.brand-title,
.brandTitle,
.auth-wordmark strong {
  font-weight: var(--font-weight-emphasis) !important;
}

.nav a,
.nav-section,
.navSection,
.side-link,
button,
.button,
.tool-button,
.btn,
.refresh,
.register-clear,
.manage,
.header-signout,
.signout,
.action-panel button,
.action-panel a,
.introActions button,
.register a,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.header-dashboard-link,
.header-role-preview-link,
.portal-shortcuts a,
.queue-tools a,
.tool-hero-actions a,
.card-title,
.panel-title,
.section-title,
.form-title,
.modal-title,
.dialog-title,
.tool-panel-title {
  font-weight: var(--font-weight-interface) !important;
}

label,
legend,
th,
.tool-table th,
.queue-table th,
.field label,
.choice-title,
.tool-field label,
.tool-label,
.accessory-editor legend {
  font-weight: var(--font-weight-interface) !important;
}

p,
td,
dd,
li,
small,
.muted,
.supporting-text,
.helper-text,
.fieldHelp,
.hint {
  font-weight: var(--font-weight-body) !important;
}

.dashboard-copy strong,
.dashboard-nav-copy strong,
.signed-user strong,
.user-mini strong,
button strong,
.button strong,
.tool-button strong,
.btn strong,
.tableWrap td strong,
.device-register tbody td strong,
.tool-table tbody td strong,
.queue-table tbody td strong,
.detail strong {
  font-weight: var(--font-weight-interface) !important;
}

.dashboard-metric strong,
.summary-card strong,
.summaryCard strong,
.metric-value,
.metricValue,
.stats-card strong,
.statsCard strong,
.queue-stat strong,
.reportSummary strong,
.userMetrics strong,
.employee-portal-summary strong,
.offboarding-summary strong,
.offboarding-metrics strong,
.count,
.total,
.money.current {
  font-weight: var(--font-weight-emphasis) !important;
  font-variant-numeric: tabular-nums;
}

.badge,
.status-pill,
.chloe-status,
.chloe-status-select,
.asset-status,
.conditionBadge,
.userStatus,
.request-status,
.dashboard-role,
.warranty,
.deviceType,
.eol {
  font-weight: var(--font-weight-interface) !important;
}

.eyebrow,
.dashboard-workspace-kicker,
.info-eyebrow,
.tool-kicker,
.assignment-kicker,
.section-label,
.action-panel::before {
  font-weight: var(--font-weight-interface) !important;
}

strong,
b {
  font-weight: var(--font-weight-emphasis);
}

.required,
.required-marker {
  font-weight: var(--font-weight-statistic) !important;
}