/* =============================================================================
   PLACEHOLDER — overwrite this file with a copy of CDM's wwwroot/app.css.
   CDM's stylesheet is the house design system (Monitor CRMS: Poppins, Tabler icons,
   dark blue #262262, bright blue #12c3f4, white sidebar, pill controls). MonitorInsight
   markup uses CDM's own class names, so the copy drops straight in.
   This placeholder approximates only the house classes MonitorInsight uses, from the
   values recorded in the CDM docs, so the app is usable before the copy is made.
   MonitorInsight-only styles are in insight.css and survive the copy.
   ============================================================================= */
:root {
    --dark-blue: #262262;
    --bright-blue: #12c3f4;
    --orange: #f7931e;
    --purple: #7b5ea7;
    --ink-900: #1d1c3f;
    --ink-600: #55557a;
    --ink-300: #9a9ab5;
    --line: #e4e6ef;
    --surface: #f5f6fa;
    --card: #ffffff;
}

html, body { margin: 0; height: 100%; }
body { font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: 14px; color: var(--ink-900); background: var(--surface); }
a { color: var(--dark-blue); }

.cdm-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.cdm-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px;
              background: var(--card); border-bottom: 1px solid var(--line); }
.cdm-toolbar { display: flex; align-items: center; gap: 10px; }
.cdm-task-body { flex: 1; overflow-y: auto; padding: 28px; }
.cdm-task-head { width: 100%; margin-bottom: 20px; }
.cdm-task-head.has-tabs { margin-bottom: 12px; }

.cdm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.cdm-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit;
           color: var(--ink-600); cursor: pointer; white-space: nowrap; }
.cdm-tab.is-active { color: var(--ink-900); font-weight: 600; border-bottom-color: var(--bright-blue); }

.cdm-task-cols { display: flex; justify-content: center; gap: 20px; }
.cdm-task-cols.is-split { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; align-items: start; }
.cdm-task-main { width: 820px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.cdm-task-cols.is-split .cdm-task-main { width: auto; min-width: 0; }
.cdm-task-rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cdm-task-main > :first-child, .cdm-task-rail > :first-child { margin-top: 0; }

.cdm-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.cdm-task-main .cdm-card { padding: 20px 24px; }
.cdm-task-rail .cdm-card { padding: 18px 20px; }

.cdm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cdm-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; }
.cdm-stat-lead { background: var(--dark-blue); color: #fff; border-color: var(--dark-blue); }

.cdm-qf { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--line);
          border-radius: 999px; padding: 4px; }
.cdm-qf-btn { border: 0; background: none; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px;
              color: var(--ink-600); cursor: pointer; }
.cdm-qf-btn.is-active { background: var(--card); color: var(--ink-900); font-weight: 600; box-shadow: 0 1px 2px rgba(38,34,98,.12); }

.cdm-search-wrap { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
                   border-radius: 999px; padding: 6px 14px; }
.cdm-search-wrap input { border: 0; outline: 0; font: inherit; min-width: 200px; background: transparent; }
.cdm-select { font: inherit; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: #fff; color: var(--ink-900); }
.cdm-page-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.cdm-scroll-x { overflow-x: auto; }

@media (max-width: 880px) {
    .cdm-task-cols, .cdm-task-cols.is-split { display: flex; flex-direction: column; }
}