/* Organization-selected palette, typography, and shapes shared by workspace and login. */
:root {
  --platform-primary-soft: color-mix(in srgb, var(--platform-primary) 12%, white);
  --platform-primary-dark: color-mix(in srgb, var(--platform-primary) 78%, #102d29);
  --platform-line: color-mix(in srgb, var(--platform-primary) 16%, #dce5dc);
}

@media screen {
  body.workspace-app,
  .login-page {
    font-family: var(--platform-font-family), sans-serif !important;
    font-size: var(--platform-font-size) !important;
  }
  .workspace-app :where(.form-control, .form-select, .form-label, .btn, .table-modern, .table-modern th, .table-modern td, .page-card-body, .sidebar-nav a, .topbar-breadcrumb, .alert, p, li),
  .login-card :where(.form-control, .form-select, .form-label, .btn, p, li, button) {
    font-family: var(--platform-font-family) !important;
    font-size: var(--platform-font-size) !important;
  }
  .workspace-app :where(.small, small, .form-text, .stat-label, .topbar-date, .breadcrumb-parent),
  .login-card :where(.small, small, .form-text) {
    font-family: var(--platform-font-family) !important;
    font-size: calc(var(--platform-font-size) * .82) !important;
  }
  .workspace-app .page-link {
    font-family: var(--platform-font-family) !important;
    font-size: var(--platform-font-size) !important;
  }
  .workspace-app .stat-number { font-size: calc(var(--platform-font-size) * 1.8) !important; }
  .workspace-app :where(h1, h2, h3, h4, h5, h6, .page-card-title) {
    font-family: var(--platform-font-family), sans-serif !important;
  }
  .workspace-app h1 { font-size: calc(var(--platform-font-size) * 1.9) !important; }
  .workspace-app h2 { font-size: calc(var(--platform-font-size) * 1.65) !important; }
  .workspace-app h3 { font-size: calc(var(--platform-font-size) * 1.45) !important; }
  .workspace-app h4 { font-size: calc(var(--platform-font-size) * 1.3) !important; }
  .workspace-app h5 { font-size: calc(var(--platform-font-size) * 1.2) !important; }
  .workspace-app :where(h6, .page-card-title) { font-size: calc(var(--platform-font-size) * 1.12) !important; }
  .login-card h4 { font-family: var(--platform-font-family), sans-serif !important; }
  .login-card .login-logo h4 { font-size: calc(var(--platform-font-size) * 1.4) !important; }
}

body.workspace-app { background: var(--platform-page); }
.workspace-app .sidebar { background: var(--platform-sidebar); }
.workspace-app .topbar { background: color-mix(in srgb, var(--platform-surface) 96%, transparent); }
.workspace-app .page-card,
.workspace-app .stat-card { background: var(--platform-surface); }
.workspace-app .btn,
.login-card .btn { border-radius: var(--app-button-radius) !important; }
.workspace-app .page-card,
.workspace-app .stat-card,
.workspace-app .modal-content,
.workspace-app .alert,
.workspace-app .filter-bar,
.login-card,
.qr-login-panel { border-radius: var(--app-surface-radius) !important; }
.workspace-app .form-control,
.workspace-app .form-select,
.workspace-app .input-group-text,
.login-card .form-control,
.login-card .input-group-text { border-radius: var(--app-control-radius) !important; }
.workspace-app .btn-primary,
.login-card .btn-primary {
  color: var(--platform-primary-contrast);
  background: var(--platform-primary);
  border-color: var(--platform-primary);
}
.workspace-app .btn-primary:hover,
.login-card .btn-primary:hover {
  color: var(--platform-primary-contrast);
  background: var(--platform-primary-dark);
  border-color: var(--platform-primary-dark);
}
.workspace-app .btn-outline-primary,
.login-card .btn-outline-primary {
  color: var(--platform-primary-ink);
  border-color: var(--platform-primary);
}
.workspace-app .btn-outline-primary:hover,
.login-card .btn-outline-primary:hover {
  color: var(--platform-primary-contrast);
  background: var(--platform-primary);
  border-color: var(--platform-primary);
}
.workspace-app .text-primary:not(.btn-primary):not(.btn-outline-primary),
.workspace-app a:not(.sidebar-nav a):not(.workspace-home-link):not(.workspace-profile-shortcut):not(.btn-primary):not(.btn-outline-primary):not(.badge),
.login-card .text-primary:not(.btn-primary):not(.btn-outline-primary) { color: var(--platform-primary) !important; }
.workspace-app .workspace-home-link { background: var(--platform-primary-dark); }
.workspace-app .workspace-home-link:hover,
.workspace-app .workspace-home-link.active { background: var(--platform-primary); }
.workspace-app .workspace-nav-icon,
.workspace-app .workspace-quick-section h2 i { color: var(--platform-accent); }
.workspace-app .table-modern th {
  background: var(--platform-primary-soft);
  border-color: var(--platform-line);
}
.workspace-app .form-control:focus,
.workspace-app .form-select:focus,
.login-card .form-control:focus {
  border-color: var(--platform-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-primary) 16%, transparent);
}

.login-page {
  background: linear-gradient(135deg, var(--platform-sidebar) 0%, var(--platform-primary) 100%);
}
.login-card { background: var(--platform-surface); }
.login-logo i { color: var(--platform-primary); }
.qr-login-panel {
  border-color: var(--platform-line);
  background: var(--platform-primary-soft);
}
.qr-login-panel h6,
.login-logo h4 { color: var(--platform-primary-dark); }
.login-password-toggle { min-width: 44px; }

.theme-preview {
  display: flex;
  min-height: 116px;
  align-items: stretch;
  overflow: hidden;
  color: var(--ws-ink);
  background: var(--platform-page);
  border: 1px solid var(--platform-line);
  border-radius: var(--app-surface-radius);
  font-family: var(--platform-font-family);
  font-size: var(--platform-font-size);
}
.theme-preview-sidebar {
  width: 22%;
  background: var(--platform-sidebar);
}
.theme-preview-content { flex: 1; padding: 13px; }
.theme-preview-card {
  display: flex;
  min-height: 88px;
  flex-direction: column;
  justify-content: space-between;
  padding: 11px;
  background: var(--platform-surface);
  border: 1px solid var(--platform-line);
  border-radius: var(--app-surface-radius);
}
.theme-preview-button {
  align-self: flex-start;
  padding: 5px 12px;
  color: #fff;
  background: var(--platform-primary);
  border: 0;
  border-radius: var(--app-button-radius);
}