/* ============================================================ pastel.css
   The pastel palette first used on the integration tracker's status pills,
   applied app-wide: tags, pills, priority badges, flash/nudge notices, stat
   tiles and any status-like dropdown (tinted by its value, see pastel.js).
   Loaded after theme.css so these win. Each tone is a soft background with a
   darker text of the same hue; the label always carries the meaning, colour
   is the second channel. Dark mode blends each hue into the surface instead
   of using the light wash. ============================================== */

:root {
  --pa-green-bg:  #EAF3DE; --pa-green-fg:  #27500A; --pa-green:  #45a862;
  --pa-red-bg:    #FCEBEB; --pa-red-fg:    #791F1F; --pa-red:    #e0605a;
  --pa-blue-bg:   #E6F1FB; --pa-blue-fg:   #0C447C; --pa-blue:   #4a96e0;
  --pa-amber-bg:  #FAEEDA; --pa-amber-fg:  #633806; --pa-amber:  #e0a03d;
  --pa-teal-bg:   #E1F5EE; --pa-teal-fg:   #085041; --pa-teal:   #2fb39a;
  --pa-grey-bg:   #EDEAE0; --pa-grey-fg:   #5F5E5A; --pa-grey:   #9a9aa5;
  --pa-pink-bg:   #FBEAF0; --pa-pink-fg:   #72243E; --pa-pink:   #d6598f;
  --pa-purple-bg: #EEEDFE; --pa-purple-fg: #3C3489; --pa-purple: #8a7ee8;
  --pa-orange-bg: #FAECE7; --pa-orange-fg: #712B13; --pa-orange: #e0703a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pa-green-bg:  color-mix(in srgb, var(--pa-green)  22%, var(--surface-1)); --pa-green-fg:  color-mix(in srgb, var(--pa-green)  55%, #fff);
    --pa-red-bg:    color-mix(in srgb, var(--pa-red)    22%, var(--surface-1)); --pa-red-fg:    color-mix(in srgb, var(--pa-red)    55%, #fff);
    --pa-blue-bg:   color-mix(in srgb, var(--pa-blue)   22%, var(--surface-1)); --pa-blue-fg:   color-mix(in srgb, var(--pa-blue)   55%, #fff);
    --pa-amber-bg:  color-mix(in srgb, var(--pa-amber)  22%, var(--surface-1)); --pa-amber-fg:  color-mix(in srgb, var(--pa-amber)  55%, #fff);
    --pa-teal-bg:   color-mix(in srgb, var(--pa-teal)   22%, var(--surface-1)); --pa-teal-fg:   color-mix(in srgb, var(--pa-teal)   55%, #fff);
    --pa-grey-bg:   color-mix(in srgb, var(--pa-grey)   22%, var(--surface-1)); --pa-grey-fg:   color-mix(in srgb, var(--pa-grey)   55%, #fff);
    --pa-pink-bg:   color-mix(in srgb, var(--pa-pink)   22%, var(--surface-1)); --pa-pink-fg:   color-mix(in srgb, var(--pa-pink)   55%, #fff);
    --pa-purple-bg: color-mix(in srgb, var(--pa-purple) 22%, var(--surface-1)); --pa-purple-fg: color-mix(in srgb, var(--pa-purple) 55%, #fff);
    --pa-orange-bg: color-mix(in srgb, var(--pa-orange) 22%, var(--surface-1)); --pa-orange-fg: color-mix(in srgb, var(--pa-orange) 55%, #fff);
  }
}
:root[data-theme="dark"] {
  --pa-green-bg:  color-mix(in srgb, var(--pa-green)  22%, var(--surface-1)); --pa-green-fg:  color-mix(in srgb, var(--pa-green)  55%, #fff);
  --pa-red-bg:    color-mix(in srgb, var(--pa-red)    22%, var(--surface-1)); --pa-red-fg:    color-mix(in srgb, var(--pa-red)    55%, #fff);
  --pa-blue-bg:   color-mix(in srgb, var(--pa-blue)   22%, var(--surface-1)); --pa-blue-fg:   color-mix(in srgb, var(--pa-blue)   55%, #fff);
  --pa-amber-bg:  color-mix(in srgb, var(--pa-amber)  22%, var(--surface-1)); --pa-amber-fg:  color-mix(in srgb, var(--pa-amber)  55%, #fff);
  --pa-teal-bg:   color-mix(in srgb, var(--pa-teal)   22%, var(--surface-1)); --pa-teal-fg:   color-mix(in srgb, var(--pa-teal)   55%, #fff);
  --pa-grey-bg:   color-mix(in srgb, var(--pa-grey)   22%, var(--surface-1)); --pa-grey-fg:   color-mix(in srgb, var(--pa-grey)   55%, #fff);
  --pa-pink-bg:   color-mix(in srgb, var(--pa-pink)   22%, var(--surface-1)); --pa-pink-fg:   color-mix(in srgb, var(--pa-pink)   55%, #fff);
  --pa-purple-bg: color-mix(in srgb, var(--pa-purple) 22%, var(--surface-1)); --pa-purple-fg: color-mix(in srgb, var(--pa-purple) 55%, #fff);
  --pa-orange-bg: color-mix(in srgb, var(--pa-orange) 22%, var(--surface-1)); --pa-orange-fg: color-mix(in srgb, var(--pa-orange) 55%, #fff);
}

/* ---- tone helpers: .tone-green etc. work on anything ---- */
.tone-green  { background: var(--pa-green-bg);  color: var(--pa-green-fg); }
.tone-red    { background: var(--pa-red-bg);    color: var(--pa-red-fg); }
.tone-blue   { background: var(--pa-blue-bg);   color: var(--pa-blue-fg); }
.tone-amber  { background: var(--pa-amber-bg);  color: var(--pa-amber-fg); }
.tone-teal   { background: var(--pa-teal-bg);   color: var(--pa-teal-fg); }
.tone-grey   { background: var(--pa-grey-bg);   color: var(--pa-grey-fg); }
.tone-pink   { background: var(--pa-pink-bg);   color: var(--pa-pink-fg); }
.tone-purple { background: var(--pa-purple-bg); color: var(--pa-purple-fg); }
.tone-orange { background: var(--pa-orange-bg); color: var(--pa-orange-fg); }

/* ---- status dropdowns (classes added by pastel.js from the value) ---- */
select.tone-sel {
  width: auto; min-width: 0; border-radius: 999px; border: 1px solid transparent;
  padding: 3px 22px 3px 10px; cursor: pointer; font-weight: 500; min-height: 0;
}
select.tone-sel:focus { border-color: var(--series-1); }
select.tone-sel option { background: var(--surface-1); color: var(--text-primary); }

/* ---- tags ---- */
.tag { background: var(--pa-grey-bg); color: var(--pa-grey-fg); border-color: transparent; }
.tag.sent-good { background: var(--pa-green-bg); color: var(--pa-green-fg); border-color: transparent; }
.tag.sent-mid  { background: var(--pa-amber-bg); color: var(--pa-amber-fg); border-color: transparent; }
.tag.sent-bad  { background: var(--pa-red-bg);   color: var(--pa-red-fg);   border-color: transparent; }
/* .tag.deactivated stays solid red on purpose (see app.css) */

/* ---- pills (health, churn, tier): soft fill, the dot keeps the strong hue ---- */
.pill { box-shadow: none; border-color: transparent; background: var(--pa-grey-bg); color: var(--pa-grey-fg); }
.pill.green    { background: var(--pa-green-bg);  color: var(--pa-green-fg); }
.pill.amber, .pill.watch    { background: var(--pa-amber-bg);  color: var(--pa-amber-fg); }
.pill.red, .pill.critical   { background: var(--pa-red-bg);    color: var(--pa-red-fg); }
.pill.at_risk               { background: var(--pa-orange-bg); color: var(--pa-orange-fg); }
.pill.unset, .pill.none, .pill.tier-none, .pill.tier-dormant { background: var(--pa-grey-bg); color: var(--pa-grey-fg); }
.pill.tier-power  { background: var(--pa-purple-bg); color: var(--pa-purple-fg); }
.pill.tier-active { background: var(--pa-blue-bg);   color: var(--pa-blue-fg); }
.pill.tier-light  { background: var(--pa-teal-bg);   color: var(--pa-teal-fg); }

/* ---- priority badges ---- */
.pri-badge { border-color: transparent; box-shadow: none; }
.pri-badge.is-critical { background: var(--pa-red-bg);    color: var(--pa-red-fg);    border-color: transparent; }
.pri-badge.is-high     { background: var(--pa-orange-bg); color: var(--pa-orange-fg); border-color: transparent; }
.pri-badge.is-medium   { background: var(--pa-blue-bg);   color: var(--pa-blue-fg);   border-color: transparent; }
.pri-badge.is-monitor  { background: var(--pa-grey-bg);   color: var(--pa-grey-fg);   border-color: transparent; }
.pri-badge.is-monitor::before { background: currentColor; opacity: .5; }

/* ---- notices ---- */
.flash { background: var(--pa-blue-bg); color: var(--pa-blue-fg); }
.flash.ok { background: var(--pa-green-bg); color: var(--pa-green-fg); }
.flash.error { background: var(--pa-red-bg); color: var(--pa-red-fg); }
.nudge { background: var(--pa-amber-bg); color: var(--pa-amber-fg); }
.nudge.danger { background: var(--pa-red-bg); color: var(--pa-red-fg); }
.nudge a, .flash a { color: inherit; text-decoration: underline; }

/* ---- stat tiles: soft tint per tile, cycling hues, so a row of numbers
        reads as distinct things. Tiles that already pick a pastel-N keep it. ---- */
.tiles > .tile:not([class*="pastel-"]):not(.danger) { border-left: 3px solid var(--pa-blue); background: var(--pa-blue-bg); }
.tiles > .tile:not([class*="pastel-"]):not(.danger):nth-child(6n+2) { border-left-color: var(--pa-teal);   background: var(--pa-teal-bg); }
.tiles > .tile:not([class*="pastel-"]):not(.danger):nth-child(6n+3) { border-left-color: var(--pa-green);  background: var(--pa-green-bg); }
.tiles > .tile:not([class*="pastel-"]):not(.danger):nth-child(6n+4) { border-left-color: var(--pa-purple); background: var(--pa-purple-bg); }
.tiles > .tile:not([class*="pastel-"]):not(.danger):nth-child(6n+5) { border-left-color: var(--pa-pink);   background: var(--pa-pink-bg); }
.tiles > .tile:not([class*="pastel-"]):not(.danger):nth-child(6n+6) { border-left-color: var(--pa-amber);  background: var(--pa-amber-bg); }
.tile.danger { background: var(--pa-red-bg); border-left-color: var(--pa-red); }
.tiles > .tile .label, .tiles > .tile .foot { color: color-mix(in srgb, currentColor 70%, transparent); }

/* ---- pipeline stage headers ---- */
.pipe-stage-head { background: var(--pa-blue-bg); color: var(--pa-blue-fg); }

/* ---- integration tracker stat cards ---- */
.itd-stat.total { background: var(--pa-blue-bg); }
.itd-stat[data-stat="completed"] { background: var(--pa-green-bg); }
.itd-stat[data-stat="pending"] { background: var(--pa-amber-bg); }
.itd-stat.dep-client { background: var(--pa-pink-bg); }
.itd-stat.dep-vendor { background: var(--pa-blue-bg); }
.itd-stat.dep-owner { background: var(--pa-orange-bg); }
.itd-stat .label { color: inherit; opacity: .75; }