/* CET application stylesheet. Baseline shell + detail-panel styling. */

:root {
  --cet-fg: #1a1a1a;
  --cet-bg: #ffffff;
  --cet-accent: #0b5cad;
  --cet-border: #d8dde3;
  --cet-success: #27ae60;
  --cet-warning: #f39c12;
  --cet-warning-alt: #e67e22;
  --cet-danger: #e74c3c;
  --cet-danger-dark: #922b21;
  --cet-muted: #888;
  --cet-bg-light: #f7f8fa;
  --cet-drawer-width: 560px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--cet-fg);
  background: var(--cet-bg);
}

.cet-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--cet-border);
}

.cet-brand {
  font-weight: 600;
  color: var(--cet-accent);
}

.cet-main {
  padding: 1.25rem;
}

.cet-flash {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.cet-flash-error { color: #b00020; }
.cet-flash-info { color: var(--cet-accent); }
.cet-flash-message { color: var(--cet-fg); }

.cet-login {
  max-width: 22rem;
  margin: 3rem auto;
}

.cet-login-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cet-login-form input {
  padding: 0.5rem;
  border: 1px solid var(--cet-border);
  border-radius: 4px;
}

.cet-login-form button {
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: var(--cet-accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

/* ========================================================================
   Customer Detail Panel — Side Drawer (D1, D2)
   ======================================================================== */

/* Overlay */
.cet-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.cet-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Drawer panel — slides from right (D24) */
.cet-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--cet-drawer-width);
  height: 100vh;
  background: var(--cet-bg);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cet-drawer.open {
  transform: translateX(0);
}

/* Drawer header */
.cet-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cet-border);
  position: sticky;
  top: 0;
  background: var(--cet-bg);
  z-index: 1;
}
.cet-drawer-header h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--cet-accent);
}
.cet-drawer-close {
  background: none;
  border: 1px solid var(--cet-border);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
  color: var(--cet-muted);
  line-height: 1;
}
.cet-drawer-close:hover {
  color: var(--cet-fg);
  border-color: var(--cet-accent);
}

/* Drawer body */
.cet-drawer-body {
  padding: 1rem 1.25rem 2rem;
}

/* Section cards */
.cet-drawer-section {
  margin-bottom: 1.5rem;
}
.cet-drawer-section h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cet-fg);
  border-bottom: 1px solid var(--cet-border);
  padding-bottom: 0.4rem;
}

/* Revenue summary table */
.cet-rev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.cet-rev-table th,
.cet-rev-table td {
  padding: 0.35rem 0.5rem;
  text-align: right;
  border-bottom: 1px solid var(--cet-border);
}
.cet-rev-table th:first-child,
.cet-rev-table td:first-child {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.cet-rev-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--cet-border);
}
.cet-trend-down { color: var(--cet-danger); }
.cet-trend-up { color: var(--cet-success); }

/* Engineer utilization table */
.cet-eng-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.cet-eng-table th,
.cet-eng-table td {
  padding: 0.25rem 0.4rem;
  text-align: right;
  border-bottom: 1px solid var(--cet-border);
}
.cet-eng-table th:first-child,
.cet-eng-table td:first-child {
  text-align: left;
  font-weight: 600;
}
.cet-eng-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--cet-border);
  background: var(--cet-bg-light);
}

/* Activity timeline */
.cet-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cet-activity-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--cet-border);
  cursor: pointer;
}
.cet-activity-item:last-child {
  border-bottom: none;
}
.cet-activity-item:hover {
  background: var(--cet-bg-light);
}
.cet-activity-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
}
.cet-activity-date {
  font-weight: 600;
  color: var(--cet-accent);
  white-space: nowrap;
}
.cet-activity-type {
  text-transform: capitalize;
  color: var(--cet-muted);
  font-style: italic;
}
.cet-activity-person {
  color: var(--cet-muted);
  font-size: 0.78rem;
}
.cet-activity-summary {
  margin: 0.25rem 0 0.4rem;
  font-size: 0.82rem;
  line-height: 1.35;
}
.cet-activity-body {
  display: none;
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--cet-muted);
  padding: 0.4rem 0.6rem;
  background: var(--cet-bg-light);
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}
.cet-activity-item.expanded .cet-activity-body {
  display: block;
}

/* Quality badges */
.cet-quality-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cet-quality-substantive {
  background: #d5f5e3;
  color: #1e8449;
}
.cet-quality-marginal {
  background: #fef9e7;
  color: #b7950b;
}
.cet-quality-non-substantive {
  background: #fdedec;
  color: #c0392b;
}

/* Scope tags */
.cet-scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.cet-scope-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
}
.cet-scope-ps {
  background: #d6eaf8;
  color: #1a5276;
}
.cet-scope-ps-opp {
  background: #e8daef;
  color: #6c3483;
}
.cet-scope-product {
  background: #fdebd0;
  color: #b9770e;
}

/* Engagement health table */
.cet-eng-health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.cet-eng-health-table th,
.cet-eng-health-table td {
  padding: 0.3rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--cet-border);
}
.cet-eng-health-table th {
  font-weight: 600;
  color: var(--cet-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cet-eng-health-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--cet-border);
  background: var(--cet-bg-light);
}

/* Status color badges (A4 thresholds) */
.cet-status-all-good { color: var(--cet-success); font-weight: 600; }
.cet-status-alert { color: var(--cet-warning); font-weight: 600; }
.cet-status-warning-15 { color: var(--cet-warning-alt); font-weight: 600; }
.cet-status-warning-2 { color: var(--cet-danger); font-weight: 600; }
.cet-status-forfeited { color: var(--cet-danger-dark); font-weight: 600; }

/* Commission structure tables */
.cet-comm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.cet-comm-table th,
.cet-comm-table td {
  padding: 0.3rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--cet-border);
}
.cet-comm-table th {
  font-weight: 600;
  color: var(--cet-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cet-comm-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cet-comm-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--cet-border);
  background: var(--cet-bg-light);
}

/* Role source badges */
.cet-role-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}
.cet-role-team-role { background: #d5f5e3; color: #1e8449; }
.cet-role-inferred { background: #fef9e7; color: #b7950b; }
.cet-role-override { background: #d6eaf8; color: #1a5276; }
.cet-role-placeholder { color: var(--cet-muted); font-style: italic; }

/* Commission for-life placeholder rows */
.cet-row-placeholder td {
  background: #f9f9f9;
  color: var(--cet-muted);
}

/* Highlight at-risk dollar */
.cet-at-risk-highlight {
  color: var(--cet-danger);
  font-weight: 700;
}

/* Section E3 forfeiture history */
.cet-forfeiture-entry {
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
  border-left: 3px solid var(--cet-danger);
  background: #fdf2f1;
  border-radius: 0 3px 3px 0;
  font-size: 0.82rem;
}
.cet-forfeiture-entry .rate-before,
.cet-forfeiture-entry .rate-after {
  font-weight: 600;
}
.cet-forfeiture-entry .rate-after {
  color: var(--cet-danger);
}
.cet-badge-dry-run {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: #eaecee;
  color: #5d6d7e;
  text-transform: uppercase;
}
.cet-badge-applied {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: #fdedec;
  color: #c0392b;
  text-transform: uppercase;
}

/* Utility */
.cet-empty-state {
  text-align: center;
  padding: 1rem 0;
  color: var(--cet-muted);
  font-style: italic;
  font-size: 0.85rem;
}