/* Copesetics Backend — Global Styles */

:root {
  color-scheme: light;
  font-family: "Segoe UI", Arial, sans-serif;

  /* Colors */
  --background: #fafafc;
  --surface: #ffffff;
  --text: #17243c;
  --muted: #718096;
  --border: #e3e7ef;

  --purple: #7153b8;
  --pink: #e4529b;
  --violet: #6555a6;

  /* Brand gradient */
  --gradient: linear-gradient(
    110deg,
    #ed77b2 0%,
    #cf4b9a 48%,
    #6555a6 100%
  );

  /* Title bar */
  --title-bar-height: 0px;
  --title-bar-active: #ffffff;
  --title-bar-inactive: #fafafa;
  --title-bar-color: var(--title-bar-active);

  /* Layout */
  --sidebar-width: 252px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  color: var(--text);
}

/* Browser application: no desktop window title bar. */

/* Shared accessibility */

[hidden] {
  display: none !important;
}

button,
input {
  font-family: inherit;
}

button:disabled {
  cursor: not-allowed;
}


/* Copesetics Engine v1.2 — Global styles (Stage 3) */
:root { --copesetics-scrollbar-color: #E2E2E2; }
html, body, * { scrollbar-color: var(--copesetics-scrollbar-color) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--copesetics-scrollbar-color); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #c9c9c9; }


/* Shared equal-height card standard for current and future modules. */

/* Copesetics Engine v1.2 — canonical shared module design tokens.
   New modules use .copesetics-module, .copesetics-module-header,
   .copesetics-card-grid, .copesetics-card, and .copesetics-card-icon.
   Existing Dashboard/Partners selectors remain unchanged for visual stability. */
:root {
  --ce-module-heading-size: 28px;
  --ce-module-heading-weight: 750;
  --ce-module-heading-tracking: -0.8px;
  --ce-module-header-gap: 34px;
  --ce-card-gap: 20px;
  --ce-card-padding: 26px;
  --ce-card-radius: 16px;
  --ce-card-icon-size: 45px;
  --ce-card-icon-radius: 12px;
  --ce-card-icon-bottom-gap: 20px;
  --ce-card-title-bottom-gap: 9px;
  --ce-card-shadow: 0 5px 20px rgba(27, 39, 70, .025);
}

/* Shared card foundation moved out of the Partners module. */
:where(.dashboard-card, .partner-card, .copesetics-card) {
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 5px 20px rgba(27,39,70,.025);
}


/* Opt-in layout for future modules. */
.copesetics-module { width: 100%; min-width: 0; }
.copesetics-module-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: var(--ce-module-header-gap);
}
.copesetics-module-header h2 {
  margin: 0; font-size: var(--ce-module-heading-size);
  font-weight: var(--ce-module-heading-weight);
  letter-spacing: var(--ce-module-heading-tracking);
}
.copesetics-card-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ce-card-gap); align-items: stretch;
}
.copesetics-card { padding: var(--ce-card-padding); }
.copesetics-card-icon {
  display: grid; place-items: center;
  width: var(--ce-card-icon-size); height: var(--ce-card-icon-size);
  margin-bottom: var(--ce-card-icon-bottom-gap);
  border-radius: var(--ce-card-icon-radius);
  background: #f3eefb; color: var(--purple);
}
.copesetics-card-icon svg { width: 22px; height: 22px; }
.copesetics-card h3 {
  margin: 0 0 var(--ce-card-title-bottom-gap);
  font-size: 16px; font-weight: 600;
}
.copesetics-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
@media (max-width: 1100px) {
  .copesetics-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .copesetics-card-grid { grid-template-columns: minmax(0, 1fr); }
  .copesetics-module-header { flex-direction: column; }
}

/* v1.2: Add 10px of visual breathing room beneath every module title.
   Transform only the heading text, not its layout box: module card grids
   retain their exact existing starting positions. */
.page-header .page-heading h2,
.partners-heading h2,
.copesetics-module-header h2 {
  transform: translateY(-10px);
}

/* Shared module alignment: Partners is the canonical top offset. */
.dashboard-main:has(#dashboard-home:not([hidden])) { padding-top: 27px; }
.page-header, .partners-heading, .copesetics-module-header { margin-top: 0; }
/* Titles and cards are aligned independently; title spacing does not shift cards. */

/* v1.2 verified baseline: same title and first-card Y coordinates in every module.
   Keep this at the shared design-system layer, not in individual module offsets. */
.dashboard-main { padding-top:27px !important; }
.dashboard-main:has(#dashboard-home:not([hidden])) { padding-top:27px !important; }
.page-header, .partners-heading, .copesetics-module-header { margin-bottom:34px !important; }

/* v1.2: Shared card-only vertical offset for Dashboard, Partners and future modules.
   This does not affect headings, dialogs, popups or other module content. */
:root { --ce-card-grid-lift: -13px; }
.dashboard-grid, .partners-cards, .copesetics-card-grid {
  transform: translateY(var(--ce-card-grid-lift));
}
/* Partners already had a 7px lift: retain it in addition to the new 13px. */
#partners-view > #partners-cards { --ce-card-grid-lift: -20px; }

/* v1.3: authenticated window title; sign-in remains icon-only. */
.window-app-title { margin-left: 9px; font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; pointer-events: none; }