/* Shared visual identity for screens. Document/export styling stays independent. */
@media screen {
  :root {
    --ui-ink: #203b3c;
    --ui-muted: #566c6b;
    --ui-accent: #197d68;
    --ui-accent-dark: #126652;
    --ui-line: #dbe7e2;
    --ui-surface: #f4f7f5;
    --app-bg: var(--ui-surface);
    --app-text: var(--ui-ink);
    --app-muted: var(--ui-muted);
    --app-border: var(--ui-line);
    --app-primary: var(--ui-accent);
    --app-primary-dark: var(--ui-accent-dark);
    --app-focus: 0 0 0 .22rem rgb(25 125 104 / 18%);
    --portal-ink: var(--ui-ink);
    --portal-muted: var(--ui-muted);
    --portal-soft: #637c75;
    --portal-line: var(--ui-line);
    --portal-line-strong: #bdd3c9;
    --portal-surface-muted: #f7faf8;
    --portal-bg: var(--ui-surface);
    --portal-primary: var(--ui-accent);
    --portal-primary-dark: var(--ui-accent-dark);
    --portal-primary-soft: #e9f5ee;
    --portal-accent: #8dd4bd;
    --pwa-primary: #197d68;
    --pwa-accent: #8dd4bd;
  }

  html { scrollbar-width: thin; scrollbar-color: #9fbab0 #f4f7f5; }
  html::-webkit-scrollbar { width: 7px; height: 7px; }
  html::-webkit-scrollbar-track { background: var(--theme-surface, #f4f7f5); }
  html::-webkit-scrollbar-thumb { background: var(--ui-scroll-thumb, #9fbab0); border: 2px solid var(--theme-page, #f4f7f5); border-radius: 20px; }
  html::-webkit-scrollbar-thumb:hover { background: #718f84; }
  html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  :root { --ui-scroll-thumb: #9bb7ad; }
  html[data-theme="dark"] { --ui-scroll-thumb: #617e76; }
  :is(.crm-board, .crm-lane-cards, .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs) {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scroll-thumb) transparent;
  }
  /* Chromium's native thin rail still has arrow buttons on Windows. */
  @supports selector(::-webkit-scrollbar) {
    :is(.crm-board, .crm-lane-cards, .crm-card-operations .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs) { scrollbar-width: auto; scrollbar-color: auto; }
    :is(.crm-board, .crm-lane-cards, .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs)::-webkit-scrollbar { width: 6px; height: 6px; }
    :is(.crm-board, .crm-lane-cards, .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs)::-webkit-scrollbar-track { background: transparent; }
    :is(.crm-board, .crm-lane-cards, .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs)::-webkit-scrollbar-thumb { background: var(--ui-scroll-thumb); border-radius: 999px; }
    :is(.crm-board, .crm-lane-cards, .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    :is(.crm-board, .crm-lane-cards, .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs)::-webkit-scrollbar-corner { background: transparent; }
  }
  ::selection { color: var(--theme-green-text, #123c30); background: var(--theme-green-surface, #cae9dc); }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--ui-accent);
    outline-offset: 3px;
  }
  .app-main h1, .trial-main h1 { font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.65; }
  :where(.app-main, .trial-main) .btn { min-height: 44px; padding-inline: 16px; line-height: 1.65; align-content: center; }
  :where(.app-main, .trial-main) .btn-sm { min-height: 38px; padding-inline: 12px; }
  .app-main .license-action-grid .btn { min-height: 38px; }
  main summary { min-height: 44px; align-content: center; }
  .dashboard-period-filter button { min-height: 44px; }
  :where(.app-main, .trial-main) .page-link { min-width: 40px; min-height: 40px; display: grid; place-items: center; }
  :where(.app-main, .trial-main) .form-check-input:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
  :where(.app-main, .trial-main) .form-label { font-weight: 500; }
  :where(.app-main, .trial-main) .table-responsive { scrollbar-width: thin; scrollbar-color: #a9c2b8 #f4f7f5; }
  :where(.app-main, .trial-main) .btn-outline-primary { --bs-btn-color: #126652; --bs-btn-border-color: #a9cfc0; --bs-btn-hover-bg: #197d68; --bs-btn-hover-border-color: #197d68; --bs-btn-active-bg: #126652; --bs-btn-active-border-color: #126652; }
  .login-page { background: radial-gradient(circle at top right, var(--theme-green-surface, #dceee5), transparent 45%), var(--ui-surface); }
  .logo-icon { box-shadow: 0 10px 24px rgb(25 125 104 / 20%); }

  .customer-portal-logo > span { background: linear-gradient(145deg, #238a74, #126652); box-shadow: 0 9px 20px rgb(25 125 104 / 18%); }
  .customer-primary-button { background: linear-gradient(135deg, #197d68, #126652); box-shadow: 0 12px 24px rgb(25 125 104 / 20%); }
  .customer-primary-button:hover { box-shadow: 0 16px 30px rgb(25 125 104 / 25%); }
  .customer-portal-page .btn-primary { --bs-btn-bg: #197d68; --bs-btn-border-color: #197d68; --bs-btn-hover-bg: #126652; --bs-btn-hover-border-color: #126652; --bs-btn-active-bg: #126652; --bs-btn-active-border-color: #126652; }
  .customer-portal-page .btn-outline-primary { --bs-btn-color: #126652; --bs-btn-border-color: #a9cfc0; --bs-btn-hover-bg: #197d68; --bs-btn-hover-border-color: #197d68; --bs-btn-active-bg: #126652; --bs-btn-active-border-color: #126652; }
  .customer-login-page { background: radial-gradient(circle at 88% 10%, #245c4e70, transparent 25rem), linear-gradient(135deg, #102622, #163934); }
  .training-hero { background: linear-gradient(120deg, #163934, #1d5046); }
  .training-course-card.is-selected { border-color: var(--ui-accent); background: var(--theme-green-surface, #e9f5ee); box-shadow: inset 0 0 0 1px var(--ui-accent); }
  .training-playlist a:hover, .training-playlist a.is-selected { background: var(--theme-green-surface, #e9f5ee); color: var(--ui-accent-dark); }
  .training-playlist .is-selected .training-episode-number { background: var(--ui-accent); }
  .customer-welcome, .customer-security-intro { background: linear-gradient(135deg, #163934, #1d5046); }
  .customer-welcome p { color: #d0e5dc; }
  .customer-welcome-trust span { color: var(--theme-muted, #bbd9cc); }
  .customer-welcome-trust svg { color: var(--theme-green-text, #8dd4bd); }
  .customer-license-card-accent { background: linear-gradient(90deg, #197d68, var(--theme-green-surface, #8dd4bd)); }
  .customer-profile-security:hover { border-color: var(--theme-border, #b9d8cc); background: var(--theme-green-surface, #e9f5ee); }
  .customer-empty-icon, .customer-download-icon, .customer-license-module-icon { background: var(--theme-green-surface, #e9f5ee); }
  .public-download-page { color: var(--ui-ink); background: radial-gradient(ellipse at top right, var(--theme-green-surface, #dceee5), transparent 55%), var(--ui-surface); }
  .download-app-icon { background: var(--theme-green-surface, #e9f5ee); color: var(--ui-accent-dark); }
  .download-main-button { background: var(--ui-accent); border-color: var(--ui-accent); }
  .download-main-button:hover { background: var(--ui-accent-dark); border-color: var(--ui-accent-dark); }
  .download-footer a { color: var(--ui-accent-dark); }
  .download-empty, .download-release-meta { background: var(--ui-surface); }
  .persian-picker-day[aria-pressed=true] { background: var(--ui-accent); color: #fff; }
  .persian-picker button:focus-visible, .persian-picker select:focus-visible { outline-color: var(--ui-accent); }

  @media (max-width: 767px), (pointer: coarse) {
    :where(.app-main, .trial-main) .btn-sm, :where(.app-main, .trial-main) .page-link, .app-main .license-action-grid .btn { min-height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
  @media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary):focus-visible { outline-color: Highlight; }
    html { scrollbar-color: auto; }
    :is(.crm-board, .crm-lane-cards, .crm-card-operations .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs) { scrollbar-color: auto; }
    :is(.crm-board, .crm-lane-cards, .crm-card-actions[popover], .crm-tabs, .crm-table-wrap, .report-tabs, .bug-tabs)::-webkit-scrollbar-thumb { background: ButtonText; }
  }
}