/*
 * Da-Vinci shared UI layer
 * Canonical specification: DA_VINCI_WEB_DESIGN_SYSTEM.md
 * Keep behavior and application data untouched; this file owns visual semantics.
 */
:root {
  --dv-font-sans: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --dv-ink: #172033;
  --dv-muted: #687080;
  --dv-canvas: #f6f8f8;
  --dv-surface: #ffffff;
  --dv-surface-subtle: #fbfaf8;
  --dv-line: #e8e6e1;
  --dv-primary: #3463bd;
  --dv-primary-hover: #28529f;
  --dv-primary-soft: #f4f7fc;
  --dv-focus: rgba(52, 99, 189, 0.16);
  --dv-gold: #8a580d;
  --dv-success: #1f6b62;
  --dv-success-soft: #f0f8f6;
  --dv-warning: #8a580d;
  --dv-warning-soft: #fff6e7;
  --dv-danger: #b54e4a;
  --dv-danger-soft: #fff0ef;
  --dv-neutral-soft: #f3f3f0;
  --dv-radius-control: 9px;
  --dv-radius-panel: 14px;
  --dv-radius-dialog: 20px;
  --dv-shadow-hover: 0 18px 45px rgba(23, 32, 51, 0.07);
  --dv-shadow-dialog: 0 24px 80px rgba(23, 32, 51, 0.20);

  /* Backward-compatible aliases used by existing report pages. */
  --ink: var(--dv-ink);
  --muted: var(--dv-muted);
  --line: var(--dv-line);
  --accent: var(--dv-primary);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  color: var(--dv-ink) !important;
  background: var(--dv-canvas) !important;
  font-family: var(--dv-font-sans) !important;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--dv-focus) !important;
}

/* Workspace shell */
body > main {
  width: min(100%, 1368px);
  max-width: 1368px !important;
  padding: 32px 24px 56px !important;
}

.top.portal-page-header {
  align-items: center !important;
  gap: 32px;
  min-height: 92px;
  margin-bottom: 20px;
  padding: 6px 0 20px !important;
  border-bottom: 1px solid var(--dv-line);
}

.top .hero h1,
.portal-page-header .hero h1 {
  margin: 0 0 6px !important;
  color: var(--dv-ink);
  font-size: 32px !important;
  line-height: 1.2;
  letter-spacing: -0.035em !important;
}

.top .hero p,
.portal-page-header .hero p {
  margin: 0;
  color: var(--dv-muted);
  font-size: 14px;
  line-height: 1.5;
}

.user {
  color: var(--dv-muted) !important;
  font-size: 14px;
}

.user a {
  color: var(--dv-gold) !important;
}

.user .toolbox-return {
  margin-right: 16px;
  margin-left: 0 !important;
  color: var(--dv-primary) !important;
  font-weight: 700;
  text-decoration: none;
}

.user .toolbox-return:hover {
  color: var(--dv-primary-hover) !important;
  text-decoration: underline;
}

/* Actions */
.button,
button.button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--dv-primary) !important;
  border-radius: var(--dv-radius-control) !important;
  background: var(--dv-primary) !important;
  color: #fff !important;
  font-family: var(--dv-font-sans);
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, box-shadow 180ms ease;
}

.button:hover,
button.button:hover,
a.button:hover {
  border-color: var(--dv-primary-hover) !important;
  background: var(--dv-primary-hover) !important;
}

.button.secondary,
button.button.secondary,
a.button.secondary {
  border-color: #cfd5e0 !important;
  background: var(--dv-surface) !important;
  color: var(--dv-primary) !important;
}

.button.secondary:hover,
button.button.secondary:hover,
a.button.secondary:hover {
  border-color: var(--dv-primary) !important;
  background: var(--dv-primary-soft) !important;
  color: var(--dv-primary-hover) !important;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 0 0 18px !important;
}

.controls .new-client-button {
  border-color: var(--dv-primary) !important;
  background: var(--dv-primary) !important;
}

.controls .import-clients,
.controls .account-import-button,
.controls .system-admin-button,
.controls .button.secondary {
  border-color: #cfd5e0 !important;
  background: var(--dv-surface) !important;
  color: var(--dv-primary) !important;
}

.controls .import-clients:hover,
.controls .account-import-button:hover,
.controls .system-admin-button:hover,
.controls .button.secondary:hover {
  border-color: var(--dv-primary) !important;
  background: var(--dv-primary-soft) !important;
  color: var(--dv-primary-hover) !important;
}

.password-reset-button {
  border-color: var(--dv-danger) !important;
  background: var(--dv-danger) !important;
  color: #fff !important;
}

/* Filters */
.status-tabs {
  gap: 6px;
  margin: 0 0 12px !important;
}

.status-tabs a {
  min-height: 34px;
  padding: 7px 11px !important;
  border: 1px solid #cfd5e0 !important;
  border-radius: 8px !important;
  background: var(--dv-surface) !important;
  color: var(--dv-primary) !important;
}

.status-tabs a:hover {
  border-color: var(--dv-primary) !important;
  background: var(--dv-primary-soft) !important;
  color: var(--dv-primary-hover) !important;
}

.status-tabs a.active {
  border-color: var(--dv-primary) !important;
  background: var(--dv-primary) !important;
  color: #fff !important;
}

form.search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px !important;
  padding: 14px;
  border: 1px solid #e3e9f2;
  border-radius: var(--dv-radius-panel);
  background: var(--dv-primary-soft);
}

.search input,
.search select,
.form input,
.form select {
  min-height: 46px;
  padding: 11px 12px !important;
  border: 1px solid #d3d0ca !important;
  border-radius: var(--dv-radius-control) !important;
  background: var(--dv-surface);
  color: var(--dv-ink);
  font: inherit;
}

.search input {
  flex: 1 1 320px;
  max-width: none !important;
}

.search select {
  flex: 0 0 190px;
  width: 190px;
}

.search .button {
  min-height: 46px;
  border-color: var(--dv-primary) !important;
  background: var(--dv-primary) !important;
  color: #fff !important;
}

.health-legend {
  margin-left: auto;
  color: var(--dv-muted) !important;
  font-size: 13px !important;
}

/* Customer list */
.list {
  border: 1px solid var(--dv-line) !important;
  border-radius: var(--dv-radius-panel) !important;
  background: var(--dv-surface);
  box-shadow: 0 1px 0 rgba(23, 32, 51, 0.02);
}

.list .head {
  background: var(--dv-surface-subtle) !important;
  color: var(--dv-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.01em;
}

.list .row {
  min-height: 64px;
  border-top: 1px solid var(--dv-line) !important;
  transition: background-color 160ms ease;
}

.list .row:hover {
  background: #fafcff;
}

.list .row .name {
  color: var(--dv-ink) !important;
  font-weight: 700 !important;
}

.list .row .name:hover,
.list .head a:hover {
  color: var(--dv-primary) !important;
}

.service-status {
  font-weight: 700 !important;
}

.service-status.active {
  background: var(--dv-success-soft) !important;
  color: var(--dv-success) !important;
}

.service-status.suspended {
  background: var(--dv-danger-soft) !important;
  color: var(--dv-danger) !important;
}

.service-status.not_started {
  background: var(--dv-neutral-soft) !important;
  color: var(--dv-muted) !important;
}

.site-button,
.health-status {
  border-color: #dbe1e9 !important;
  background: #fbfcfe !important;
}

.site-button:hover,
.health-status:hover {
  border-color: #aebdd3 !important;
  background: var(--dv-primary-soft) !important;
}

.list .actions .action {
  min-height: 34px;
  padding: 8px 10px !important;
  border: 1px solid var(--dv-primary) !important;
  border-radius: 8px !important;
  background: var(--dv-primary) !important;
  color: #fff !important;
  font-size: 12px !important;
}

.list .actions .action:hover {
  border-color: var(--dv-primary-hover) !important;
  background: var(--dv-primary-hover) !important;
}

.list .actions .settings-action,
.list .actions .report-preview-action {
  border-color: #cfd5e0 !important;
  background: var(--dv-surface) !important;
  color: var(--dv-primary) !important;
}

.list .actions .settings-action:hover,
.list .actions .report-preview-action:hover {
  border-color: var(--dv-primary) !important;
  background: var(--dv-primary-soft) !important;
}

/* Pagination */
.customer-pagination a:hover {
  border-color: var(--dv-primary) !important;
  color: var(--dv-primary) !important;
}

.customer-pagination .active {
  border-color: var(--dv-primary) !important;
  background: var(--dv-primary) !important;
  color: #fff !important;
}

.customer-pagination-info {
  color: var(--dv-muted) !important;
}

/* Feedback and dialogs */
.notice {
  background: var(--dv-success-soft) !important;
  color: var(--dv-success) !important;
}

.error {
  background: var(--dv-danger-soft) !important;
  color: var(--dv-danger) !important;
}

.modal {
  background: rgba(23, 32, 51, 0.52) !important;
  backdrop-filter: blur(2px);
}

.dialog {
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-radius-dialog) !important;
  box-shadow: var(--dv-shadow-dialog);
}

/* Login */
body > form.box {
  width: min(498px, calc(100% - 32px)) !important;
  padding: 112px 38px 38px !important;
  border: 1px solid var(--dv-line) !important;
  border-radius: var(--dv-radius-dialog) !important;
  background: var(--dv-surface);
  box-shadow: var(--dv-shadow-hover) !important;
}

body > form.box h1 {
  margin: 0 0 8px !important;
  font-size: 32px;
  letter-spacing: -0.035em;
}

body > form.box .brand {
  color: var(--dv-gold) !important;
}

body > form.box input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbc9c2;
  border-radius: var(--dv-radius-control);
  background: var(--dv-surface);
  color: var(--dv-ink);
}

body > form.box .button {
  width: 100%;
  min-height: 46px;
}

@media (max-width: 900px) {
  body > main {
    padding-top: 26px !important;
  }

  .top.portal-page-header {
    align-items: flex-start !important;
  }

  .health-legend {
    flex-basis: 100%;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  body > main {
    padding: 24px 16px 44px !important;
  }

  .top.portal-page-header {
    display: block !important;
  }

  .top .hero h1,
  .portal-page-header .hero h1 {
    font-size: 28px !important;
  }

  .user {
    margin-top: 16px;
    text-align: left !important;
  }

  .user .toolbox-return {
    margin-left: 0;
    margin-right: 14px;
  }

  .controls .button {
    flex: 1 1 calc(50% - 8px);
  }

  form.search {
    padding: 12px;
  }

  .search input,
  .search select,
  .search .button {
    flex: 1 1 100%;
    width: 100% !important;
  }

  .list .row {
    margin: 0;
    padding: 18px 16px !important;
  }

  .list .row > * {
    margin: 8px 0 !important;
  }

  .list .actions .action {
    min-height: 44px;
    padding: 10px 14px !important;
  }

  body > form.box {
    padding: 104px 24px 24px !important;
  }
}

@media (max-width: 430px) {
  .controls .button {
    flex-basis: 100%;
  }

  body > form.box .recaptcha {
    max-width: 100%;
    overflow: hidden;
  }
}

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