/* ============================================================
   Ark visual upgrade layer
   Cosmetic properties only: no layout, visibility or interaction rules.
   Loaded after page styles so existing DOM and JavaScript behavior stay intact.
   ============================================================ */

:root {
  --c-primary: #1A3E6E;
  --c-primary-hover: #15325A;
  --c-accent: #2563EB;
  --c-accent-bg: #EFF6FF;
  --c-accent-border: #BFDBFE;
  --c-surface: #FFFFFF;
  --c-surface-2: #F8FAFC;
  --c-surface-3: #F1F5F9;
  --c-border: #E2E8F0;
  --c-border-soft: #F1F5F9;
  --c-text: #0F172A;
  --c-text-2: #334155;
  --c-text-3: #64748B;
  --c-text-4: #94A3B8;
  --c-text-inv: #FFFFFF;
  --c-green: #059669;
  --c-green-bg: #ECFDF5;
  --c-green-border: #A7F3D0;
  --c-amber: #D97706;
  --c-amber-bg: #FFFBEB;
  --c-amber-border: #FDE68A;
  --c-red: #DC2626;
  --c-red-bg: #FEF2F2;
  --c-red-border: #FECACA;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 14px 36px rgba(15, 23, 42, .14);
  --transition: .18s ease;
  --transition-fast: .12s ease;

  /* Admin aliases keep the existing admin component contract intact. */
  --adm-content-bg: var(--c-surface-2);
  --adm-card-bg: var(--c-surface);
  --adm-border: var(--c-border);
  --adm-text-1: var(--c-text);
  --adm-text-2: var(--c-text-2);
  --adm-text-3: var(--c-text-4);
  --adm-header-bg: var(--c-surface);
  --adm-nav-bg: var(--c-surface);
  --adm-nav-text: var(--c-text-3);
  --adm-nav-active: var(--c-primary);
  --adm-nav-active-bg: var(--c-accent-bg);
}

body {
  background-color: var(--c-surface-2);
  color: var(--c-text);
}

/* Product shell: Ark is a light system. Keep all existing shell dimensions. */
#kb-header,
.adm-header,
.adm-nav {
  background: var(--c-surface);
}

.adm-header {
  border-bottom-color: var(--c-border);
  box-shadow: var(--shadow-sm);
}

.adm-nav {
  border-right-color: var(--c-border);
}

:is(.adm-back-btn, .adm-logo-sub, .adm-nav-section-label, .adm-nav-version) {
  color: var(--c-text-3);
}

:is(.adm-logo-text, .adm-user-name) {
  color: var(--c-text);
}

:is(.adm-user-role, .adm-user-caret) {
  color: var(--c-text-3);
}

.adm-header-divider {
  background: var(--c-border);
}

:is(.adm-back-btn, .adm-header-user):hover {
  background: var(--c-surface-3);
  color: var(--c-text);
}

.adm-user-avatar {
  border-radius: var(--radius-md);
  background: var(--c-primary);
  color: var(--c-text-inv);
}

.adm-nav-item {
  margin: 2px 10px;
  border-radius: var(--radius-md);
  color: var(--c-text-2);
}

.adm-nav-item:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
}

.adm-nav-item.active {
  background: var(--c-accent-bg);
  color: var(--c-primary);
  box-shadow: inset 3px 0 0 var(--c-primary);
}

/* Buttons: colors and depth only. Existing sizing and event classes are untouched. */
:is(.btn-primary, .adm-btn-primary, .account-btn, .btn-submit, .btn-confirm, .task-modal-submit, .filter-btn-apply) {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-text-inv);
  box-shadow: var(--shadow-sm);
}

:is(.btn-primary, .adm-btn-primary, .account-btn, .btn-submit, .btn-confirm, .task-modal-submit, .filter-btn-apply, .search-btn, .sync-btn, .btn-booking, .add-stage-task-btn, .uc-head > button, .uc-error button, .uc-role-list-head button, .uc-role-editor-head button) {
  border-radius: var(--radius-md);
  transition: background var(--transition), transform var(--transition-fast);
}

:is(.btn-primary, .adm-btn-primary, .account-btn, .btn-submit, .btn-confirm, .task-modal-submit, .filter-btn-apply, .search-btn, .sync-btn, .btn-booking, .add-stage-task-btn, .uc-head > button, .uc-error button, .uc-role-list-head button, .uc-role-editor-head button):hover:not(:disabled) {
  transform: translateY(-1px);
}

:is(.btn-primary, .adm-btn-primary, .account-btn, .btn-submit, .btn-confirm, .task-modal-submit, .filter-btn-apply, .search-btn, .sync-btn, .btn-booking, .add-stage-task-btn, .uc-head > button, .uc-error button, .uc-role-list-head button, .uc-role-editor-head button):active:not(:disabled) {
  transform: translateY(0);
}

/* Legacy primary-action names used by older SCRM modules. */
:is(.search-btn, .sync-btn, .btn-booking, .add-stage-task-btn, .resource-preview-toolbar a, .uc-head > button, .uc-error button, .uc-role-list-head button, .uc-role-editor-head button) {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-text-inv);
  box-shadow: var(--shadow-sm);
}

:is(.search-btn, .sync-btn, .btn-booking, .add-stage-task-btn, .resource-preview-toolbar a, .uc-head > button, .uc-error button, .uc-role-list-head button, .uc-role-editor-head button):hover:not(:disabled) {
  background-color: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
}

/* Brand marks replace the remaining purple legacy gradient without resizing them. */
:is(.logo-mark, .user-avatar, .kb-logo-icon, .sidebar-user-avatar, .kb-ai-assistant-btn) {
  background-color: var(--c-primary);
  background-image: linear-gradient(135deg, var(--c-primary) 0%, #27598F 100%);
}

/* Legacy blue accents, progress indicators and pagination. */
:is(.flow-node-dot, .timeline-type, .btn-add-tag, .board-card-version-badge, .map-info-window .btn-detail, .progress-fill, .design-page .readiness-group b, .readiness-mini-bar b, .page-num-active, .workflow-tab-active::after) {
  background-color: var(--c-accent);
}

:is(.summary-card:first-child .card-icon, .statistics-card:first-child .card-icon) {
  background-color: var(--c-primary);
  background-image: linear-gradient(135deg, var(--c-primary) 0%, #27598F 100%);
}

:is(.workflow-tab-active, .hb-link:hover, .tag-remove, .insight-category-entry b, .progress-text) {
  color: var(--c-accent);
}

:is(.page-num-active, .stage-block.active .stage-dot) {
  border-color: var(--c-accent);
}

:is(.btn-primary, .adm-btn-primary, .account-btn, .btn-submit, .btn-confirm, .task-modal-submit, .filter-btn-apply):hover:not(:disabled) {
  background-color: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
}

:is(.btn-secondary, .adm-btn-secondary, .btn-cancel, .filter-btn-reset) {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}

:is(.btn-secondary, .adm-btn-secondary, .btn-cancel, .filter-btn-reset):hover:not(:disabled) {
  background-color: var(--c-accent-bg);
  border-color: var(--c-accent-border);
  color: var(--c-accent);
}

:where(button, [role="button"]):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

/* Form surfaces. No dimensions are changed. */
:is(.form-input, .form-select, .form-textarea, .adm-form-input, input, select, textarea) {
  border-color: var(--c-border);
  border-radius: var(--radius-md);
  background-color: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

:is(.form-input, .form-select, .form-textarea, .adm-form-input, input, select, textarea):focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

::placeholder {
  color: var(--c-text-4);
}

/* Shared surfaces and overlays retain their original geometry and stacking. */
:where(.card, .adm-card, .modal-content, .task-modal, .insight-modal, .risk-modal, .msg-modal, .account-modal) {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  border-radius: var(--radius-lg);
}

:where(.modal-content, .task-modal, .insight-modal, .risk-modal, .msg-modal, .account-modal) {
  box-shadow: var(--shadow-lg);
}

:is(.modal-overlay, .task-modal-overlay, .insight-modal-overlay, .msg-modal-overlay, .risk-modal-mask, .wecom-modal-mask) {
  background-color: rgba(15, 23, 42, .48);
}

/* Tables and navigation states. */
:where(table, .adm-table, .kb-table) {
  border-color: var(--c-border);
}

:where(table, .adm-table, .kb-table) :where(th, td) {
  border-color: var(--c-border-soft);
}

:where(table, .adm-table, .kb-table) tbody tr:hover {
  background-color: var(--c-surface-2);
}

:where(table, .adm-table, .kb-table) thead,
:where(table, .adm-table, .kb-table) th {
  background-color: var(--c-surface-2);
  color: var(--c-text-2);
}

:where(.active, .selected)[class*="tab"],
:where(.active, .selected)[class*="nav"] {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

:is(.tab-btn.active, .kb-tab.active, .msg-tabs button.active, .uc-tabs button.active) {
  background-color: var(--c-accent-bg);
  border-color: var(--c-accent-border);
  color: var(--c-primary);
}

/* Front design workbench: map its existing controls to the supplied components. */
.design-page {
  background: var(--c-surface-2);
  color: var(--c-text);
}

:is(.dw-toolbar, .dw-content) {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.dw-title-row {
  border-bottom-color: var(--c-border);
}

:is(.dw-title-row h1, .project-number, .project-line strong) {
  color: var(--c-text);
}

:is(.dw-title-row p, .dw-sync-meta, .project-id, .line-label, .dw-pagination) {
  color: var(--c-text-3);
}

.design-page .quick-chip {
  border-color: var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  transition: all var(--transition);
}

.design-page .quick-chip:hover,
.design-page .quick-chip.active {
  border-color: var(--c-accent-border);
  background: var(--c-accent-bg);
  color: var(--c-accent);
}

.design-page .project-card {
  border-color: var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.design-page .project-card:hover {
  border-color: var(--c-accent-border);
  box-shadow: var(--shadow-md);
}

.design-page .project-footer {
  border-top-color: var(--c-border);
}

.design-page :is(.contract-mode, .progress-badge, .status-badge) {
  border-radius: 20px;
  border: 1px solid var(--c-border-soft);
  font-weight: 500;
}

.design-page .project-card .contract-mode,
.design-page .status-badge.scheduled {
  border-color: var(--c-accent-border);
  background: var(--c-accent-bg);
  color: var(--c-accent);
}

.design-page .status-badge.normal {
  border-color: var(--c-green-border);
  background: var(--c-green-bg);
  color: var(--c-green);
}

.design-page .status-badge.near {
  border-color: var(--c-amber-border);
  background: var(--c-amber-bg);
  color: var(--c-amber);
}

.design-page :is(.status-badge.overdue, .status-badge.delayed) {
  border-color: var(--c-red-border);
  background: var(--c-red-bg);
  color: var(--c-red);
}

.design-page .progress-badge {
  background: var(--c-surface-3);
  color: var(--c-text-2);
}

/* Admin modules: cards, tabs, filters and tables follow the same component set. */
:is(.uc-groups, .uc-list, .uc-role-list, .uc-role-editor, .msg-card, .msg-stat-card) {
  border-color: var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: none;
}

.uc-tabs {
  border-color: var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: none;
}

.uc-tabs button {
  border-radius: var(--radius-md);
  color: var(--c-text-2);
}

.uc-tabs button.active {
  box-shadow: none;
}

.uc-group {
  border-color: var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-text-2);
}

.uc-group:hover {
  background: var(--c-surface-2);
}

.uc-group.active {
  border-color: var(--c-accent-border);
  background: var(--c-accent-bg);
  color: var(--c-accent);
}

.uc-table th {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-weight: 600;
}

.uc-table td {
  color: var(--c-text);
  border-bottom-color: var(--c-border-soft);
}

:is(.uc-role, .uc-scope, .uc-status, .msg-channel, .msg-log-status) {
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.uc-role {
  border: 1px solid var(--c-accent-border);
  background: var(--c-accent-bg);
  color: var(--c-accent);
}

.uc-scope {
  border: 1px solid var(--c-amber-border);
  background: var(--c-amber-bg);
  color: var(--c-amber);
}

.uc-status {
  border: 1px solid var(--c-green-border);
  background: var(--c-green-bg);
  color: var(--c-green);
}

/* Semantic states retain meaning while using the Ark palette. */
:where(.badge-success, .status-success, .status-completed, .success) {
  color: var(--c-green);
  border-color: var(--c-green-border);
  background-color: var(--c-green-bg);
}

:where(.badge-warning, .status-warning, .status-pending, .warning) {
  color: var(--c-amber);
  border-color: var(--c-amber-border);
  background-color: var(--c-amber-bg);
}

:where(.badge-error, .status-error, .status-failed, .error) {
  color: var(--c-red);
  border-color: var(--c-red-border);
  background-color: var(--c-red-bg);
}