/* ==========================================================================
   KORE INTRANET DEMO

   A working miniature of the Kore.co intranet at accounts.kore.co: the
   dashboard and the HR leave screen, with the sidebar switching between them.

   Written rather than ported. The real app is behind a login, its class names
   are build-hashed (a9y-MPV4NgSU-QuDLM5qJA==) and its styling is Ant Design's
   runtime CSS-in-JS, so there is no stylesheet to lift the way there was for
   the other demos. This reproduces the two screens from the app itself,
   in its own visual language, on invented data.

   Everything is namespaced .crm-* and scoped under .crm-demo.
   ========================================================================== */

.crm-demo {
  --crm-navy: #0e1a2b;
  --crm-side: #ffffff;
  --crm-ink: #1f2a37;
  --crm-body: #4b5563;
  --crm-muted: #8b96a5;
  --crm-line: #e8ecf1;
  --crm-line-2: #f1f4f8;
  --crm-bg: #f7f9fc;
  --crm-blue: #1f7ae0;
  --crm-amber: #f5a623;
  --crm-green: #16a34a;
  --crm-red: #dc2626;

  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 44px;
  grid-template-rows: 30px minmax(0, 1fr);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--crm-ink);
  background: var(--crm-bg);
  text-align: left;
  overflow: hidden;
}
.crm-demo *,
.crm-demo *::before,
.crm-demo *::after {
  box-sizing: border-box;
}
/* Most of this is scenery. Only what responds gets a pointer, so the cursor
   never promises something the demo cannot do. */
.crm-demo,
.crm-demo :where(button) {
  cursor: default;
  font: inherit;
  color: inherit;
}
.crm-demo :where(button) {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
.crm-demo [data-crm-nav],
.crm-demo [data-crm-toggle] {
  cursor: pointer;
}

/* ---------------- top strip ---------------- */
.crm-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid var(--crm-line);
  font-size: 10px;
  color: var(--crm-body);
}
.crm-top__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.crm-top b {
  font-weight: 600;
  color: var(--crm-ink);
}

/* ---------------- sidebar ---------------- */
.crm-side {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--crm-side);
  border-right: 1px solid var(--crm-line);
}
.crm-side__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}
.crm-side__brand img {
  height: 17px;
  width: auto;
}
.crm-ws {
  margin: 0 12px 10px;
  padding: 9px 10px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fcfdfe;
}
.crm-ws__dots {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
}
.crm-ws__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.crm-ws__dots i:nth-child(1) { background: #fc6f58; }
.crm-ws__dots i:nth-child(2) { background: #49c3e8; }
.crm-ws__dots i:nth-child(3) { background: #ffd160; }
.crm-ws__name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--crm-ink);
}
.crm-ws__sub {
  display: block;
  font-size: 9px;
  color: var(--crm-muted);
}

.crm-side__label {
  padding: 0 16px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crm-amber);
}
.crm-nav {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 8px;
}
.crm-nav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  color: var(--crm-body);
  transition: background 0.15s ease, color 0.15s ease;
}
.crm-nav__item:hover {
  background: var(--crm-line-2);
  color: var(--crm-ink);
}
.crm-nav__item.is-on {
  background: linear-gradient(90deg, #fef3dc, #fff9ee);
  color: #a86a00;
  font-weight: 600;
}
.crm-nav__item svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.crm-nav__chev {
  margin-left: auto;
  transition: transform 0.2s ease;
}
.crm-nav__item[aria-expanded="true"] .crm-nav__chev {
  transform: rotate(180deg);
}
/* The submenu opens on its real height, which max-height cannot animate to. */
.crm-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.crm-nav__sub.is-open {
  grid-template-rows: 1fr;
}
.crm-nav__sub > div {
  overflow: hidden;
}
.crm-nav__subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px 6px 30px;
  border-radius: 7px;
  font-size: 11px;
  color: var(--crm-body);
}
.crm-nav__subitem::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.crm-nav__subitem:hover {
  background: var(--crm-line-2);
}
.crm-nav__subitem.is-on {
  background: linear-gradient(90deg, #fef3dc, #fff9ee);
  color: #a86a00;
  font-weight: 600;
}

.crm-me {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--crm-line);
}
.crm-me__av {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--crm-green);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.crm-me__name {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}
.crm-me__mail {
  display: block;
  font-size: 9px;
  color: var(--crm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

/* ---------------- main ---------------- */
.crm-main {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.crm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: #fff;
  border-bottom: 1px solid var(--crm-line);
}
.crm-bar__spacer { flex: 1; }
.crm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--crm-line);
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
  font-weight: 500;
  color: var(--crm-body);
  white-space: nowrap;
}
.crm-chip--warn {
  border-color: #ffe0a3;
  background: #fffaf0;
  color: #a86a00;
}
.crm-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--crm-muted);
}
.crm-crumbs b {
  color: var(--crm-ink);
  font-weight: 600;
}

.crm-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px;
}

/* ---------------- cards ---------------- */
.crm-card {
  background: #fff;
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  overflow: hidden;
}
.crm-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--crm-line-2);
  font-size: 11.5px;
  font-weight: 700;
}
.crm-card__body { padding: 11px 12px; }

.crm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.crm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 12px;
  margin-top: 12px;
}

/* the hero video card */
/* The real player, as on the intranet itself. This used to be a painted
   rectangle with a red button on it, which is the one thing a live demo
   should never contain: a picture of a feature sitting inside a working
   copy of the product makes the working copy look painted too.

   Taller than the box it replaced, because a 16/6.2 letterbox left the
   YouTube controls with nowhere to sit. */
.crm-video {
  position: relative;
  aspect-ratio: 16 / 7.4;
  border-radius: 8px;
  overflow: hidden;
  background: #0b1524;
}
.crm-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* pinned files */
.crm-files { display: flex; gap: 14px; }
.crm-file { text-align: center; width: 62px; }
.crm-file__ico {
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--crm-blue);
}
.crm-file__ico svg { width: 26px; height: 26px; }
.crm-file span {
  display: block;
  font-size: 9.5px;
  color: var(--crm-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* birthdays */
.crm-bday {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid var(--crm-line);
  background: #fcfdfe;
  border-radius: 0 8px 8px 0;
}
.crm-bday__date {
  font-size: 10px;
  color: var(--crm-muted);
  width: 40px;
  flex: none;
}
.crm-bday__av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2ec5ce;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex: none;
}
.crm-bday__name { font-size: 11px; font-weight: 600; }

/* profile setup */
.crm-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  font-size: 10.5px;
  margin-bottom: 6px;
}
.crm-task--done {
  border-color: #bfe4ff;
  background: #f2f9ff;
  color: #0f5c9c;
  font-weight: 600;
}
.crm-task svg { width: 13px; height: 13px; flex: none; }

/* platform tiles */
.crm-plat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 4px;
}
.crm-plat__item { text-align: center; }
.crm-plat__item img {
  height: 24px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
}
.crm-plat__item span {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  color: var(--crm-body);
}

/* tables */
.crm-tbl { width: 100%; border-collapse: collapse; }
.crm-tbl th {
  text-align: left;
  padding: 6px 8px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--crm-muted);
  border-bottom: 1px solid var(--crm-line);
  white-space: nowrap;
}
.crm-tbl td {
  padding: 7px 8px;
  font-size: 10.5px;
  border-bottom: 1px solid var(--crm-line-2);
  white-space: nowrap;
}
.crm-tbl tr:last-child td { border-bottom: 0; }

.crm-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
}
.crm-badge--ok { background: #e8f8ee; color: #15803d; }
.crm-badge--warn { background: #fff6e5; color: #a86a00; }

/* leave balance bars */
.crm-bar-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.crm-bar-track {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--crm-line);
  overflow: hidden;
}
.crm-bar-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.crm-bar-num { font-size: 10.5px; font-weight: 600; width: 16px; text-align: right; }

/* attendance */
.crm-days { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.crm-day {
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--crm-line);
  font-size: 9.5px;
  color: var(--crm-body);
}
.crm-day.is-on {
  background: #eaf4ff;
  border-color: #bfdcff;
  color: #1257a0;
  font-weight: 600;
}
.crm-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin-top: 10px;
}
.crm-cal__dow {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--crm-muted);
  padding-bottom: 2px;
}
.crm-cal__cell {
  aspect-ratio: 1 / 0.62;
  border: 1px solid var(--crm-line-2);
  border-radius: 5px;
  background: #fcfdfe;
  padding: 3px 4px;
  font-size: 8.5px;
  color: var(--crm-muted);
  position: relative;
}
.crm-cal__cell b {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 9px;
  font-weight: 600;
  color: var(--crm-body);
}
.crm-cal__cell.is-off { background: #f4f6f9; }
.crm-cal__cell.is-leave { background: #eaf4ff; border-color: #bfdcff; }
.crm-wo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 7.5px;
  color: var(--crm-muted);
}
.crm-wo::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------- right rail ---------------- */
.crm-rail {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  background: #fff;
  border-left: 1px solid var(--crm-line);
  overflow: hidden;
}
.crm-rail img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: 0.62;
  transition: opacity 0.15s ease;
}
.crm-rail img:hover { opacity: 1; }

/* ---------------- narrow ---------------- */
@media (max-width: 900px) {
  .crm-demo {
    grid-template-columns: minmax(0, 1fr);
    font-size: 11px;
  }
  .crm-side,
  .crm-rail,
  /* Six figures on one line. They fit a desktop canvas and collide with each
     other in a phone window, and none of them is what the screen is about. */
  .crm-top {
    display: none;
  }
  .crm-main { grid-row: 2; }
  .crm-grid,
  .crm-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The mockup is absolutely positioned, so the laptop screen has nothing to
   size to. The pane is what holds it open. */
.kore-demo__pane[data-demo-pane="crm"] {
  min-height: 780px;
}
@media (max-width: 900px) {
  .kore-demo__pane[data-demo-pane="crm"] {
    min-height: 620px;
  }
}

/* ==========================================================================
   THINGS YOU CAN CLICK

   A demo that answers nothing reads as a screenshot, so the handful of live
   controls say so: a pointer, a lift on hover, and a focus ring for the
   keyboard. Everything else in the app stays flat on purpose, because
   pretending the whole sidebar works would be worse than not offering it.
   ========================================================================== */
.crm-demo .is-live {
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.crm-demo button.is-live {
  font: inherit;
  font-family: inherit;
  appearance: none;
}
.crm-demo .is-live:focus-visible {
  outline: 2px solid #1f7ae0;
  outline-offset: 1px;
}

.crm-task.is-live:hover {
  border-color: #bfdcff;
  background: #f7fbff;
}
.crm-badge.is-live:hover { background: #ffeccc; }
.crm-chip.is-live:hover { border-color: #bfdcff; background: #f2f9ff; color: #1257a0; }
.crm-day.is-live:hover { border-color: #bfdcff; background: #f2f9ff; }

/* how far through the checklist you are */
.crm-note {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--crm-muted);
}
.crm-tasks .crm-task:last-child { margin-bottom: 0; }

.crm-hint {
  margin-left: 6px;
  font-size: 9px;
  color: var(--crm-muted);
}