/* KAM-only view (js/kamday.js): New request in the menu, My Day for KAMs, and the request / claim rows with a tracker.
   Phase colours: needs you (red), with Customer Service (blue), waiting on approval (amber), on its way (teal), done (green). */
:root { --ph-you: #C2410C; --ph-you-bg: #FDEDE4; --ph-cs: #2C5599; --ph-cs-bg: #E7EFF8; --ph-ap: #8A5A00; --ph-ap-bg: #FFF1D6; --ph-way: #0F6670; --ph-way-bg: #E1F2F3; --ph-done: #2F6B55; --ph-done-bg: #E6F2EC; --ph-closed: #5B6B63; --ph-closed-bg: #EEF2EF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ph-you: #F6A77E; --ph-you-bg: #3A2116; --ph-cs: #9CC0EC; --ph-cs-bg: #1A2A3D; --ph-ap: #F1C76F; --ph-ap-bg: #3A2C0E; --ph-way: #7CCFD6; --ph-way-bg: #10302F; --ph-done: #7BC4A6; --ph-done-bg: #17251F; --ph-closed: #9AA9A1; --ph-closed-bg: #222A26; }
}
:root[data-theme="dark"] { --ph-you: #F6A77E; --ph-you-bg: #3A2116; --ph-cs: #9CC0EC; --ph-cs-bg: #1A2A3D; --ph-ap: #F1C76F; --ph-ap-bg: #3A2C0E; --ph-way: #7CCFD6; --ph-way-bg: #10302F; --ph-done: #7BC4A6; --ph-done-bg: #17251F; --ph-closed: #9AA9A1; --ph-closed-bg: #222A26; }

/* ---------- Menu: New request on top ---------- */
.side #nav > .navnew { display: flex; width: 100%; justify-content: center; gap: 8px; min-height: 46px; margin: 2px 0 10px; font-size: var(--fs-15); font-weight: 700; border-radius: var(--r-ctl); text-decoration: none; }
.side #nav > .navnew .ic { width: 20px; height: 20px; }
.side #nav > .navnew[aria-current="page"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
@media (min-width: 900px) and (max-width: 1279px) {
  .side #nav > .navnew { width: 44px; min-height: 44px; padding: 0; }
  .side #nav > .navnew .navtxt { display: none; }
}
@media (max-width: 899px) { .side #nav > .navnew { min-height: 52px; font-size: var(--fs-16); } }

/* ---------- My Day ---------- */
.kday { max-width: 1040px; display: flex; flex-direction: column; gap: 16px; }
.kday > * { min-width: 0; }
.kdhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.kddate { color: var(--muted); font-size: var(--fs-14); font-weight: 500; margin-bottom: 2px; }
.kdhead h1 { font-size: 1.75rem; }

/* Customer Service: who's in */
.kdcs { min-width: 0; }
.kdcsh { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.kdcsh span { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 4px; }
.kdcs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kdcsp { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); text-decoration: none; }
a.kdcsp:hover { border-color: var(--input-strong); }
.kdav { position: relative; display: inline-flex; flex: none; }
.kdav .pdot { position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--surface); }
.kdcsn { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.kdcsn b { font-size: var(--fs-14); }
.kdcsn small { font-size: var(--fs-12); color: var(--muted); }
.kdcsn small.st-active { color: var(--good); }

/* Start: the big button and the quick types */
.kdstart { padding: 16px; display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); grid-template-areas: "new quick" "new all"; gap: 10px 16px; align-items: stretch; }
.kdnew { grid-area: new; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 120px; font-size: 1.125rem; font-weight: 800; border-radius: var(--r-sm); text-decoration: none; text-align: center; }
.kdnew .ic { width: 30px; height: 30px; stroke-width: 2.4; }
.kdquick { grid-area: quick; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kdq { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; min-height: 84px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface2); color: var(--ink); text-decoration: none; text-align: center; font-size: var(--fs-13); font-weight: 650; line-height: 1.2; }
.kdq .ic { width: 26px; height: 26px; color: var(--blue-btn); }
.kdq:hover { border-color: var(--blue-btn); background: var(--blue-tint); }
.kdq span { overflow-wrap: anywhere; }
.kdall { grid-area: all; justify-self: end; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.kdall .ic { width: 16px; height: 16px; }

/* Where your work is up to */
.kdover { padding: 16px; }
.kdoh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kdoh h2, .kdsh h2 { font-size: var(--fs-16); font-weight: 750; color: var(--brand); }
.kdbar { display: flex; gap: 2px; height: 12px; border-radius: var(--r-pill); overflow: hidden; margin-bottom: 14px; background: var(--divider); }
.kdbar i { flex: 1 1 0; min-width: 2px; }
.kdbar i.ph-you { background: var(--ph-you); } .kdbar i.ph-cs { background: var(--ph-cs); } .kdbar i.ph-approval { background: var(--ph-ap); } .kdbar i.ph-way { background: var(--ph-way); }
.kdtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kdtile { width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i n" "l l"; align-items: center; gap: 4px 10px; padding: 12px 14px; min-height: 92px; text-align: left; border: 1px solid var(--line); border-left: 5px solid var(--tc, var(--line)); border-radius: var(--r-sm); background: var(--tb, var(--surface)); color: var(--ink); cursor: pointer; font: inherit; }
.kdtile:hover { border-color: var(--tc); border-left-color: var(--tc); }
.kdtile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tc); }
.kdti { grid-area: i; display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--surface); color: var(--tc); }
.kdti .ic { width: 20px; height: 20px; }
.kdn { grid-area: n; font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--tc); font-variant-numeric: tabular-nums; }
.kdtl { grid-area: l; font-size: var(--fs-13); font-weight: 650; color: var(--grey-ink); line-height: 1.25; }
.kdtile.zero { --tb: var(--surface); }
.kdtile.zero .kdn { color: var(--muted); }
.ph-you { --tc: var(--ph-you); --tb: var(--ph-you-bg); }
.ph-cs { --tc: var(--ph-cs); --tb: var(--ph-cs-bg); }
.ph-approval { --tc: var(--ph-ap); --tb: var(--ph-ap-bg); }
.ph-way { --tc: var(--ph-way); --tb: var(--ph-way-bg); }
.ph-done { --tc: var(--ph-done); --tb: var(--ph-done-bg); }
.ph-closed, .ph-draft { --tc: var(--ph-closed); --tb: var(--ph-closed-bg); }

.kddrafts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed var(--input); border-radius: var(--r-sm); color: var(--grey-ink); font-size: var(--fs-14); }
.kddrafts .ic { width: 18px; height: 18px; color: var(--muted); }
.kddrafts .link { min-height: 36px; font-weight: 650; }

/* Sections and rows */
.kdsec { padding: 14px 16px 10px; outline: none; scroll-margin-top: 72px; }
.kdsh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kdsh h2 { display: inline-flex; align-items: center; gap: 8px; }
.kdsh h2 .ic { width: 20px; height: 20px; color: var(--muted); }
.kdyou .kdsh h2 .ic { color: var(--ph-you); }
.kdcount { display: inline-flex; min-width: 24px; height: 24px; padding: 0 8px; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--chip-bg); font-size: var(--fs-13); font-weight: 700; color: var(--grey-ink); }
.kdyou .kdcount { background: var(--ph-you); color: #FFFFFF; }
.kdfilter { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--tc, var(--line)); border-radius: var(--r-pill); background: var(--tb, var(--surface)); color: var(--ink); font: inherit; font-size: var(--fs-13); font-weight: 650; cursor: pointer; }
.kdfilter .ic { width: 14px; height: 14px; }
.kdempty { color: var(--muted); font-size: var(--fs-14); padding: 10px 0 12px; }
.kdlinks { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 0 4px; }
.kdlinks .link { min-height: 36px; display: inline-flex; align-items: center; }

.kdlist { list-style: none; margin: 0; padding: 0; }
.kdrow { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--divider); }
.kdlist > .kdrow:first-child { border-top: 0; }
.kdlink { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--ink); text-decoration: none; border-radius: var(--r-ctl); }
.kdlink:hover { background: var(--row-hover); }
.kdic { flex: none; display: inline-flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; background: var(--tb); color: var(--tc); }
.kdic .ic { width: 20px; height: 20px; }
.kdtxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kdk { font-size: var(--fs-12); color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdtxt > b { font-size: var(--fs-15); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdst { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; min-width: 0; }
.kdst small { color: var(--grey-ink); font-size: var(--fs-13); min-width: 0; overflow-wrap: anywhere; }
.kdpill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--tb); color: var(--tc); font-size: var(--fs-12); font-weight: 750; white-space: nowrap; }
.kdpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.kdurg { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--r-pill); background: var(--red-bg); color: var(--red); font-weight: 700; }
.kdside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 340px; }
.kdside time { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.kdgo { flex: none; min-height: 44px; padding: 0 18px; margin-right: 4px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 700; }

/* The tracker: a dot per step, joined by a line */
.kdtrk { list-style: none; margin: 0; padding: 0; display: flex; width: 100%; }
.kdtrk li { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.kdtrk li::before { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.kdtrk li:first-child::before { display: none; }
.kdtrk li.done::before, .kdtrk li.now::before { background: var(--tc); }
.kdtrk i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; }
.kdtrk li.done i { background: var(--tc); border-color: var(--tc); color: #FFFFFF; }
.kdtrk li.done i .ic { width: 12px; height: 12px; stroke-width: 3; color: var(--surface); }
.kdtrk li.now i { border-color: var(--tc); box-shadow: 0 0 0 3px var(--tb); }
.kdtrk li.now i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.kdtrk span { font-size: 0.6875rem; color: var(--muted); text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.kdtrk li.now span { color: var(--ink); font-weight: 700; }
.kdtrk.ph-done li.done i { background: var(--ph-done); border-color: var(--ph-done); }

/* Requests and Claims pages use the same rows inside a card */
.kmod .kdlist, .page.cl > section > .kdlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 4px 12px; }

/* Icon rail and tablets */
@media (max-width: 1100px) {
  .kdstart { grid-template-columns: minmax(0, 1fr); grid-template-areas: "new" "quick" "all"; }
  .kdnew { flex-direction: row; min-height: 60px; }
  .kdnew .ic { width: 24px; height: 24px; }
  .kdside { width: 220px; }
}
@media (max-width: 860px) {
  .kdquick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kdtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones: one column, thumb-sized targets */
@media (max-width: 640px) {
  .kday { gap: 12px; }
  .kdhead { align-items: flex-start; flex-direction: column; }
  .kdhead h1 { font-size: 1.5rem; }
  .kdcs ul { flex-wrap: wrap; }
  .kdstart { padding: 12px; gap: 10px; }
  .kdnew { min-height: 56px; font-size: var(--fs-16); }
  .kdquick { gap: 6px; }
  .kdq { min-height: 76px; padding: 8px 4px; font-size: var(--fs-12); }
  .kdq .ic { width: 24px; height: 24px; }
  .kdall { justify-self: center; min-height: 44px; }
  .kdover { padding: 12px; }
  .kdtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kdtiles li:first-child { grid-column: 1 / -1; }
  .kdtile { min-height: 72px; padding: 10px 12px; }
  .kdn { font-size: 1.5rem; }
  .kdsec { padding: 12px 12px 8px; }
  .kdrow { flex-wrap: wrap; gap: 0 10px; }
  .kdlink { flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; }
  .kdtxt { flex-basis: calc(100% - 52px); }
  .kdside { width: 100%; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 10px; padding-left: 52px; }
  .kdside .kdtrk { flex: 0 1 200px; }
  .kdtrk span { display: none; }
  .kdrow.hasgo { padding-bottom: 12px; }
  .kdrow.hasgo .kdgo { width: calc(100% - 52px); margin: 0 0 0 52px; justify-content: center; }
  .kmod .kdlist, .page.cl > section > .kdlist { padding: 0 12px; }
}