/* Cross-surface visual layer for the Ceramic Precision redesign. */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn,
.matisse-dialog-btn,
.modal-confirm-btn {
  border-radius: var(--radius-control, 10px);
  font-weight: 650;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.btn.primary,
.matisse-dialog-btn.btn-primary,
.modal-confirm-btn,
.login-submit {
  color: #fff;
  border-color: var(--brand-jade);
  background: var(--brand-jade);
  box-shadow: 0 7px 18px rgba(47, 97, 86, .16);
}

.btn.primary:hover,
.matisse-dialog-btn.btn-primary:hover,
.modal-confirm-btn:hover,
.login-submit:hover {
  color: #fff;
  border-color: var(--brand-jade-strong);
  background: var(--brand-jade-strong);
  box-shadow: 0 9px 22px rgba(47, 97, 86, .21);
  opacity: 1;
}

.btn.primary:active,
.matisse-dialog-btn.btn-primary:active,
.login-submit:active {
  transform: translateY(1px);
}

.btn.ghost {
  color: var(--text-secondary);
  border-color: var(--line-soft);
  background: var(--surface-card);
}

.btn.ghost:hover {
  color: var(--brand-jade-strong);
  border-color: color-mix(in srgb, var(--brand-jade) 42%, var(--line-soft));
  background: var(--accent-soft);
}

.matisse-dialog,
.modal-dialog-box,
.project-card-menu,
.status-options-menu,
.row-more-dropdown,
.notification-panel,
.user-menu-dropdown {
  border-color: var(--line-soft);
  border-radius: var(--radius-card, 14px);
  background: var(--surface-elevated);
  box-shadow: var(--elevation-lg);
}

.matisse-dialog-overlay,
.modal-overlay {
  background: rgba(14, 21, 18, .48);
  backdrop-filter: blur(5px);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-color: var(--input-border);
  border-radius: var(--radius-control, 10px);
  background: var(--input-bg);
}

/* Project and management surfaces */
.dashboard-main {
  background:
    radial-gradient(circle at 98% 0%, color-mix(in srgb, var(--brand-jade) 7%, transparent) 0, transparent 28%),
    var(--surface-page);
}

.dashboard-container,
.account-container {
  max-width: 1680px;
}

.project-header,
.project-detail-header,
.sm-page-header,
.cc-header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.page-title,
.project-title,
.sm-page-title,
.cc-title,
.account-title,
.admin-page-title {
  color: var(--text-primary);
  letter-spacing: -.025em;
}

.page-title::after,
.account-title::after {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--brand-lime);
}

.project-folders-panel,
.project-table-wrapper,
.account-card,
.account-info-banner,
.admin-card,
.sm-col,
.cc-workspace,
.empty-state {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card, 14px);
  background: var(--surface-card);
  box-shadow: var(--elevation-sm);
}

.project-folders-panel {
  padding: 20px;
  background: color-mix(in srgb, var(--surface-card) 94%, var(--brand-jade) 6%);
}

.project-folder-card {
  border-radius: 12px;
  box-shadow: none;
}

.project-folder-card:hover {
  border-color: color-mix(in srgb, var(--brand-jade) 42%, var(--line-soft));
  box-shadow: 0 8px 20px rgba(25, 34, 30, .07);
  transform: translateY(-1px);
}

.project-table-wrapper {
  overflow: clip;
  box-shadow: 0 8px 28px rgba(25, 34, 30, .055);
}

.project-table th {
  height: 44px;
  color: var(--text-tertiary);
  background: var(--surface-subtle);
  letter-spacing: .035em;
  text-transform: uppercase;
}

.project-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface-card));
}

.project-thumb {
  border-radius: 9px;
}

.tab-group,
.login-tabs,
.support-view-tabs {
  border: 1px solid var(--line-soft);
  background: var(--surface-subtle);
}

.tab-btn.active,
.login-tab.active,
.support-view-tabs button.active {
  color: var(--brand-jade-strong);
  background: var(--surface-card);
  box-shadow: var(--elevation-sm);
}

.status-btn,
.owner-badge,
.role-badge,
.nav-beta-badge {
  border-radius: 999px;
}

/* Image, color and 3D workspaces: neutral chrome, untouched canvases. */
.acg-left-panel,
.acg-right-panel,
.cd-left-panel,
.cd-right-panel,
.sme-panel,
.cc-sidebar {
  background: var(--surface-card) !important;
}

.acg-panel-header,
.cd-panel-header,
.sme-step-header,
.cc-step {
  color: var(--text-secondary);
  background: var(--surface-subtle) !important;
  border-color: var(--line-soft) !important;
}

.acg-panel-title,
.cd-panel-title {
  font-weight: 720;
}

.acg-gallery-item,
.cd-gallery-item {
  border-radius: 10px;
}

.acg-gallery-item.active,
.cd-gallery-item.active {
  border-color: var(--brand-jade);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Authentication */
body.login-body {
  justify-content: center;
  padding: clamp(24px, 5vw, 72px);
  background-color: #0c1412;
  background-position: center;
}

body.login-body::before {
  background:
    linear-gradient(90deg, rgba(7, 13, 11, .22) 0%, rgba(7, 13, 11, .38) 48%, rgba(7, 13, 11, .82) 100%),
    linear-gradient(180deg, rgba(6, 12, 10, .12), rgba(6, 12, 10, .58));
}

body.login-body .login-container {
  width: min(100%, 440px);
  max-width: 440px;
  margin: auto;
}

body.login-body .login-brand {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

body.login-body .login-brand-logo {
  width: 188px;
  height: auto;
  filter: brightness(.66) saturate(1.15) contrast(1.08);
}

[data-theme="dark"] body.login-body .login-brand-logo {
  filter: brightness(1.55) saturate(.8);
}

body.login-body .login-brand-subtitle {
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: .08em;
}

body.login-body .login-card {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-card) 94%, transparent);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
  backdrop-filter: blur(24px) saturate(125%);
}

body.login-body .login-field input,
body.login-body .login-field select {
  min-height: 44px;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--input-bg) 94%, var(--porcelain-100));
}

body.login-body .login-submit {
  min-height: 46px;
  border-radius: 11px;
}

body.login-body .login-lang-toggle {
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
  background: rgba(19, 30, 26, .78);
  backdrop-filter: blur(12px);
}

body.login-body .login-footer {
  color: var(--text-tertiary);
}

/* Mobile task portal */
.mobile-portal-body {
  background:
    radial-gradient(circle at 96% 0%, rgba(63, 117, 104, .18), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(156, 200, 79, .12), transparent 36%),
    var(--surface-page) !important;
}

.mobile-portal-intro h1 {
  color: var(--text-primary);
  letter-spacing: -.045em;
}

.mobile-portal-intro h1::after {
  content: '';
  display: block;
  width: 38px;
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--brand-lime);
}

.mobile-entry-card {
  border-color: var(--line-soft) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--surface-card) 95%, transparent) !important;
  box-shadow: 0 12px 30px rgba(25, 34, 30, .075) !important;
  backdrop-filter: blur(12px);
}

.mobile-entry-card:active {
  border-color: color-mix(in srgb, var(--brand-jade) 42%, var(--line-soft)) !important;
}

.mobile-entry-icon,
.mobile-entry-card.detection .mobile-entry-icon,
.mobile-entry-card.sampling .mobile-entry-icon {
  color: var(--brand-jade-strong) !important;
  background: var(--accent-soft) !important;
}

.mobile-entry-card.sampling .mobile-entry-icon {
  color: #806126 !important;
  background: var(--warning-bg) !important;
}

.mobile-entry-copy strong {
  color: var(--text-primary);
}

.mobile-entry-copy small,
.mobile-entry-arrow {
  color: var(--text-tertiary) !important;
}

.mobile-install-confirm,
.mcd-primary,
.msf-primary,
.capture-step-primary {
  border-color: var(--brand-jade, #3f7568) !important;
  background: var(--brand-jade, #3f7568) !important;
  box-shadow: 0 9px 22px rgba(47, 97, 86, .2) !important;
}

@media (max-width: 768px) {
  body.login-body {
    justify-content: center;
    padding: 18px;
    background-position: 39% center;
  }

  body.login-body::before {
    background: rgba(7, 13, 11, .68);
  }

  body.login-body .login-container {
    margin: auto;
  }

  body.login-body .login-brand {
    margin: 0 0 20px;
    padding-bottom: 18px;
  }

  body.login-body .login-card {
    padding: 24px 20px;
    border-radius: 18px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line-soft: var(--line-strong);
  }
}