/* ui/cm_integration_config.css — WGS-117: Care Minutes integration config.

   TOKENS: --cmic-* prefixed so gate_css_namespace stays green.
   DUAL-ROOT: both .cmic-wrap and .cmic-panel carry the full token set
   (gate_css_vars requires every var() to be defined on both roots). */

.cmic-wrap, .cmic-panel {
  --cmic-indigo:    #271257;
  --cmic-indigo-2:  #3a2a6e;
  --cmic-indigo-bg: #f0eef8;
  --cmic-line:      #ececf1;
  --cmic-surface:   #fff;
  --cmic-canvas:    #f7f6fb;
  --cmic-ink:       #1c1c28;
  --cmic-muted:     #6b6b78;
  --cmic-faint:     #9a9aa6;
  --cmic-green-bg:  #e7f7ee;
  --cmic-green-fg:  #0b8a4b;
  --cmic-amber-bg:  #fef9ec;
  --cmic-amber-fg:  #92600a;
  --cmic-red-bg:    #FEF2F2;
  --cmic-red-fg:    #B91C1C;
  --cmic-gov-bg:    #e6f1fb;
  --cmic-gov-fg:    #0c447c;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--cmic-ink);
}

/* ---------- layout ---------- */
.cmic-wrap { padding: 0; }

/* ---------- section heading ---------- */
.cmic-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cmic-section-title {
  font-size: 15px; font-weight: 600; color: var(--cmic-ink); margin: 0;
}
.cmic-section-sub {
  font-size: 12.5px; color: var(--cmic-muted); margin: 3px 0 0;
}

/* ---------- cards (iOS pattern) ---------- */
.cmic-card {
  background: var(--cmic-surface);
  border: 1px solid var(--cmic-line);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(20,20,40,.03);
}
.cmic-card-title {
  font-size: 15px; font-weight: 600; color: var(--cmic-ink); margin-bottom: 3px;
}
.cmic-card-sub {
  font-size: 12.5px; color: var(--cmic-muted); margin-bottom: 14px;
}

/* ---------- iOS-style rows ---------- */
.cmic-list { display: flex; flex-direction: column; }
.cmic-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid #f2f2f6;
}
.cmic-row:last-child { border-bottom: 0; }
.cmic-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cmic-row-title { font-size: 14px; font-weight: 500; color: var(--cmic-ink); }
.cmic-row-meta  { font-size: 11.5px; color: var(--cmic-faint); }

/* ---------- iOS sliding toggle ---------- */
.cmic-switch {
  width: 50px; height: 30px; border-radius: 20px;
  background: #e4e4ea; position: relative;
  transition: background .2s ease; flex-shrink: 0; cursor: pointer;
}
.cmic-switch.on { background: var(--cmic-indigo); }
.cmic-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s ease;
}
.cmic-switch.on .cmic-switch-knob { left: 23px; }

/* ---------- source selector card ---------- */
.cmic-src-block { margin-bottom: 14px; }
.cmic-src-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cmic-muted); margin-bottom: 8px;
}
.cmic-src-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cmic-sys-sel, .cmic-tgt-sel {
  flex: 1; min-width: 160px; height: 36px;
  border: 1px solid var(--cmic-line); border-radius: 10px;
  padding: 0 12px; font-size: 13px; font-family: Poppins, sans-serif;
  background: var(--cmic-surface); color: var(--cmic-ink); cursor: pointer;
}
.cmic-sys-sel:focus, .cmic-tgt-sel:focus {
  outline: 2px solid var(--cmic-indigo); outline-offset: -1px;
}
.cmic-sys-sel:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- connected indicator ---------- */
.cmic-conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #c8c8d0; flex-shrink: 0;
}
.cmic-conn-dot.connected { background: #1d9e75; }
.cmic-conn-name { font-size: 13px; font-weight: 500; color: var(--cmic-indigo); }

/* ---------- rates display ---------- */
.cmic-rates-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 12px;
}
.cmic-rate-cell {
  background: var(--cmic-canvas); border: 1px solid var(--cmic-line);
  border-radius: 12px; padding: 12px 14px; text-align: center;
}
.cmic-rate-role {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cmic-muted); margin-bottom: 4px;
}
.cmic-rate-val {
  font-size: 22px; font-weight: 700; color: var(--cmic-ink);
  font-variant-numeric: tabular-nums;
}
.cmic-rate-unit { font-size: 11px; color: var(--cmic-faint); margin-top: 2px; }

/* ---------- manual rate inputs ---------- */
.cmic-manual-inputs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cmic-manual-row {
  display: flex; align-items: center; gap: 10px;
}
.cmic-manual-lbl {
  font-size: 13px; font-weight: 500; color: var(--cmic-ink); width: 60px; flex-shrink: 0;
}
.cmic-manual-inp {
  flex: 1; height: 36px; border: 1px solid var(--cmic-line); border-radius: 10px;
  padding: 0 12px; font-size: 14px; font-family: Poppins, sans-serif;
  background: var(--cmic-surface); color: var(--cmic-ink);
}
.cmic-manual-inp:focus { outline: 2px solid var(--cmic-indigo); outline-offset: -1px; }
.cmic-manual-unit {
  font-size: 12px; color: var(--cmic-muted); width: 30px; flex-shrink: 0;
}

/* ---------- calculate button + last-calculated row ---------- */
.cmic-calc-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.cmic-calc-btn {
  height: 36px; border-radius: 10px; font-weight: 600; font-size: 12.5px;
  cursor: pointer; font-family: Poppins, sans-serif;
  background: var(--cmic-indigo); color: #fff; border: 0; padding: 0 18px;
  transition: background .15s;
}
.cmic-calc-btn:hover { background: var(--cmic-indigo-2); }
.cmic-calc-btn:disabled { opacity: .5; cursor: not-allowed; }
.cmic-last-calc {
  font-size: 12px; color: var(--cmic-muted); flex: 1;
}
.cmic-last-calc b { color: var(--cmic-ink); }

/* ---------- portion slider ---------- */
.cmic-portion-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #f2f2f6;
}
.cmic-portion-row:last-child { border-bottom: 0; }
.cmic-portion-lbl { font-size: 13px; font-weight: 500; width: 48px; flex-shrink: 0; }
.cmic-portion-range {
  flex: 1; accent-color: var(--cmic-indigo);
}
.cmic-portion-num {
  width: 58px; height: 32px; border: 1px solid var(--cmic-line); border-radius: 8px;
  padding: 0 8px; font-size: 13px; text-align: right; font-family: Poppins, sans-serif;
  background: var(--cmic-surface); color: var(--cmic-ink);
}
.cmic-portion-num:focus { outline: 2px solid var(--cmic-indigo); outline-offset: -1px; }
.cmic-portion-unit { font-size: 12px; color: var(--cmic-muted); width: 14px; }

/* ---------- target source selector ---------- */
.cmic-tgt-block { margin-top: 0; }
.cmic-tgt-opts { display: flex; flex-direction: column; gap: 8px; }
.cmic-tgt-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--cmic-line); border-radius: 12px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.cmic-tgt-opt.selected {
  border-color: var(--cmic-indigo); background: var(--cmic-indigo-bg);
}
.cmic-tgt-opt:hover:not(.selected) { background: var(--cmic-canvas); }
.cmic-tgt-radio { margin-top: 2px; accent-color: var(--cmic-indigo); flex-shrink: 0; }
.cmic-tgt-body { display: flex; flex-direction: column; gap: 3px; }
.cmic-tgt-title { font-size: 14px; font-weight: 500; color: var(--cmic-ink); }
.cmic-tgt-desc  { font-size: 12px; color: var(--cmic-muted); line-height: 1.5; }
.cmic-tgt-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 9999px; margin-top: 3px;
}
.cmic-tgt-badge.gov { background: var(--cmic-gov-bg); color: var(--cmic-gov-fg); }
.cmic-tgt-badge.live { background: var(--cmic-green-bg); color: var(--cmic-green-fg); }

/* ---------- status / auto-save ---------- */
.cmic-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 6px; padding: 12px 0 4px;
}
.cmic-bar-st { font-size: 12px; color: var(--cmic-muted); flex: 1; }
.cmic-save-btn {
  height: 36px; border-radius: 10px; font-weight: 600; font-size: 12.5px;
  cursor: pointer; font-family: Poppins, sans-serif;
  background: var(--cmic-indigo); color: #fff; border: 0; padding: 0 18px;
}
.cmic-save-btn:hover { background: var(--cmic-indigo-2); }
.cmic-save-btn:disabled { opacity: .5; cursor: not-allowed; }
.cmic-reset-btn {
  height: 36px; border-radius: 10px; font-size: 12.5px; font-weight: 500;
  cursor: pointer; font-family: Poppins, sans-serif;
  background: transparent; color: var(--cmic-muted);
  border: 1px solid var(--cmic-line); padding: 0 14px;
}
.cmic-reset-btn:hover { background: var(--cmic-canvas); }

/* ---------- no-connection notice ---------- */
.cmic-no-conn {
  font-size: 13px; color: var(--cmic-muted); padding: 12px 14px;
  background: var(--cmic-canvas); border: 1px solid var(--cmic-line);
  border-radius: 10px; line-height: 1.55; margin-bottom: 12px;
}
.cmic-no-conn a {
  color: var(--cmic-indigo); font-weight: 600; text-decoration: none;
}
.cmic-no-conn a:hover { text-decoration: underline; }

/* ---------- facility selector bar (WGS-79) ---------- */
.cmic-fac-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--cmic-canvas);
  border: 1px solid var(--cmic-line); border-radius: 12px;
  margin-bottom: 14px;
}
.cmic-fac-label {
  font-size: 12px; font-weight: 600; color: var(--cmic-muted);
  text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0;
}
.cmic-fac-sel {
  flex: 1; min-width: 160px; height: 34px;
  border: 1px solid var(--cmic-line); border-radius: 8px;
  padding: 0 10px; font-size: 13px; font-family: Poppins, sans-serif;
  background: var(--cmic-surface); color: var(--cmic-ink); cursor: pointer;
}
.cmic-fac-sel:focus { outline: 2px solid var(--cmic-indigo); outline-offset: -1px; }
.cmic-fac-override-badge {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  background: var(--cmic-indigo-bg); color: var(--cmic-indigo);
  border-radius: 9999px; flex-shrink: 0;
}

/* ---------- timesheet acceptance section (WGS-79) ---------- */
.cmic-ts-impact {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.55;
}
.cmic-ts-impact.ok {
  background: var(--cmic-green-bg); color: var(--cmic-green-fg);
}
.cmic-ts-impact.warn {
  background: var(--cmic-amber-bg); color: var(--cmic-amber-fg);
}
.cmic-ts-fac-note {
  margin-top: 10px; padding: 9px 13px; border-radius: 8px;
  font-size: 11.5px; color: var(--cmic-muted);
  background: var(--cmic-canvas); border: 1px solid var(--cmic-line);
}

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .cmic-rates-grid { grid-template-columns: 1fr; }
  .cmic-src-row { flex-direction: column; align-items: stretch; }
  .cmic-fac-bar { flex-direction: column; align-items: stretch; }
}