/* monday.com board kit: the main table ("board") as monday draws it. Study copy for the AltLeads team, not for shipping.
   Every value is a Vibe token from monday-tokens.css, or MEASURED from monday's own public board
   (view.monday.com/embed/6276056051…, read-only, no login; captured 9 and 12 Oct 2026 at 1440 x 900, light / dark / black).
   "measured" below = read with getComputedStyle or from screen pixels of that board. Fonts: Figtree (text) + Poppins (titles), both OFL. */

@font-face { font-family: Figtree; src: url(fonts/figtree-latin-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: Poppins; src: url(fonts/poppins-latin-300-normal.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Poppins; src: url(fonts/poppins-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(fonts/poppins-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(fonts/poppins-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url(fonts/poppins-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* Roboto (Apache 2.0) is the next font in monday's own stack. monday's PUBLIC board view does not download Figtree or Poppins,
   so on that page text falls back to Roboto (checked 12 Oct 2026: document.fonts lists only sofia-pro, FontAwesome and dapulse). */
@font-face { font-family: Roboto; src: local("Roboto Light"), local("Roboto-Light"), url(fonts/roboto-latin-300-normal.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Roboto; src: local("Roboto"), local("Roboto-Regular"), url(fonts/roboto-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Roboto; src: local("Roboto Medium"), local("Roboto-Medium"), url(fonts/roboto-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- board values per theme ---------- */
:root, .light-app-theme {
  --mb-cell: var(--primary-background-color);        /* measured: cells white */
  --mb-row-hover: #f4f5f8;                           /* measured: row under the mouse */
  --mb-phone: var(--color-blue-links);               /* measured #007eb5 */
  --mb-battery-empty: var(--color-explosive);        /* measured #c4c4c4 */
  --mb-powered-bg: transparent;
}
.dark-app-theme {
  --mb-cell: var(--allgrey-background-color);        /* measured #30324e */
  --mb-row-hover: #33354b;                           /* measured */
  --mb-powered-bg: rgba(255, 255, 255, .6);         /* measured: "Powered by" sits on a 60% white pill in dark (#a3a4ae on #181b34) */
}
.black-app-theme {
  --mb-cell: var(--allgrey-background-color);        /* measured #2c2c2c */
  --mb-row-hover: #272729;                           /* measured */
  --mb-powered-bg: rgba(255, 255, 255, .6);         /* measured #a0a0a0 on #111111 */
}

.mb-board { font-family: var(--font-family); font-size: 15px; font-weight: 300; line-height: 22.5px; color: var(--primary-text-color);
  background: var(--primary-background-color); -webkit-font-smoothing: antialiased; position: relative; }
.mb-board * { box-sizing: border-box; }
/* measured: monday's board draws its text with grey (not coloured) edge smoothing, because the table sits on its own layer.
   A layer of our own gives the same text rendering on Windows. */
.mb-board { will-change: transform; }
/* the public board view: monday's stack without its web fonts (see the Roboto note above) */
.mb-public { --font-family: Roboto, "Noto Sans Hebrew", sans-serif; --title-font-family: Roboto, "Noto Sans Hebrew", sans-serif; }
.mb-public .mb-title, .mb-public .mb-group-title { font-weight: 400; }  /* measured on screen: the public page draws its titles regular, not 500 */

/* board title + menu (measured: Poppins 32/32 500, 4px side padding, 4px corners) */
.mb-title { position: absolute; left: 11px; top: 22px; height: 34px; margin: 0; padding: 0 4px; border: 1px solid transparent; border-radius: 4px;
  font: 500 32px/32px var(--title-font-family); letter-spacing: normal; color: var(--primary-text-color); white-space: nowrap; }
.mb-title:hover { border-color: var(--layout-border-color); }
.mb-dots { position: absolute; right: 8px; top: 24px; width: 32px; height: 32px; border: 0; border-radius: var(--border-radius-small); display: grid; place-items: center;
  background: transparent; color: var(--primary-text-color); cursor: pointer; transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.mb-dots:hover { background: var(--primary-background-hover-color); }
.mb-dots[aria-expanded="true"] { background: var(--primary-selected-color); }
.mb-dots svg { width: 18px; height: 18px; }

/* ---------- a group ---------- */
.mb-group { position: absolute; left: 0; --g: var(--color-bright-blue); }
.mb-group-head { position: absolute; left: 0; top: 0; height: 36px; width: 600px; display: flex; align-items: center; }
.mb-group-menu { position: absolute; left: 12px; top: 7px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--primary-text-color); opacity: 0;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--border-radius-small); }
.mb-group-head:hover .mb-group-menu, .mb-group-menu:focus-visible { opacity: 1; }
.mb-collapse { position: absolute; left: 49px; top: 7px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; padding: 0; background: transparent;
  color: var(--g); cursor: pointer; border-radius: var(--border-radius-small); transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.mb-collapse:hover { background: var(--primary-background-hover-color); }
.mb-collapse svg { width: 20px; height: 20px; transition: transform var(--motion-productive-long) var(--motion-timing-transition); }
.mb-group.closed .mb-collapse svg { transform: rotate(-90deg); }
.mb-group-title { position: absolute; left: 74.5px; top: 6.5px; height: 24px; padding: 0 4px; border: 1px solid transparent; border-radius: 4px;
  font: 500 18px/22px var(--title-font-family); color: var(--g); white-space: nowrap; }
.mb-group-title:hover { border-color: var(--layout-border-color); }
.mb-group-count { margin-left: 11px; font: 300 14px/22px var(--font-family); color: var(--secondary-text-color); opacity: 0; transition: opacity var(--motion-productive-medium); }
.mb-group-head:hover .mb-group-count { opacity: 1; }
.mb-row[hidden], .mb-group [hidden] { display: none !important; }

/* a folded group: one 60px summary bar (measured on the real board, 12 Oct 2026) */
.mb-fold { display: none; position: absolute; left: 40px; top: 0; width: 1446px; height: 60px; background: var(--mb-cell); box-shadow: var(--box-shadow-xs);
  border-radius: 6px 0 0 6px; }
.mb-group.closed .mb-fold { display: flex; }
.mb-group.closed .mb-group-head, .mb-group.closed .mb-table { display: none; }
.mb-fold > div { flex: none; height: 60px; border-right: 1px solid var(--layout-border-color); border-bottom: 1px solid var(--layout-border-color); position: relative;
  display: flex; flex-direction: column; align-items: center; font: 400 14px/20px var(--font-family); color: var(--primary-text-color); padding-top: 4px; }
.mb-fold > div:last-child { border-right: 0; }
.mb-fold .fname { align-items: flex-start; padding: 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.mb-fold .fname .mb-ind { border-radius: 6px 0 0 6px; }
.mb-fold .fname button { position: absolute; left: 11px; top: 8px; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--g); display: grid; place-items: center; cursor: pointer; border-radius: var(--border-radius-small); }
.mb-fold .fname button:hover { background: var(--primary-background-hover-color); }
.mb-fold .fname b { position: absolute; left: 40px; top: 7px; font: 500 18px/22px var(--title-font-family); color: var(--g); }
.mb-public .mb-fold .fname b { font-weight: 400; }
.mb-fold .fname small { position: absolute; left: 40px; top: 32px; font: 300 14px/22px var(--font-family); color: var(--secondary-text-color); }
.mb-fold .mb-battery { margin-top: 6px; }
.mb-fold .mb-files { margin-top: 8px; }

/* the table: 6px colour strip on the left, 36px rows, 1px lines (measured) */
.mb-table { position: absolute; left: 40px; top: 40px; width: 1446px; }
.mb-row { position: relative; display: flex; height: 36px; background: var(--mb-cell); }
.mb-row > .mb-c { flex: none; height: 36px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--layout-border-color);
  border-bottom: 1px solid var(--layout-border-color); background: var(--mb-cell); font: 400 14px/20px var(--font-family); color: var(--primary-text-color);
  overflow: hidden; white-space: nowrap; transition: background-color var(--motion-productive-short) linear; }
.mb-row > .mb-c:last-child { border-right: 0; }
.mb-ind { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--g); z-index: 2; }
.mb-head .mb-ind { border-top-left-radius: 6px; box-shadow: 0 -2px 0 0 var(--primary-background-color); }
.mb-head { border-top: 1px solid var(--layout-border-color); height: 37px; }
.mb-head > .mb-c { height: 36px; }
.mb-head { border-top-left-radius: 6px; }
.mb-head > .mb-name { border-top-left-radius: 6px; }

/* column widths (measured) */
.w-name { width: 400px; } .w-person { width: 98px; } .w-140 { width: 140px; } .w-180 { width: 180px; } .w-end { width: 68px; }
.mb-name { justify-content: flex-start !important; padding-left: 40px; position: relative; }
.mb-head .mb-name { justify-content: center !important; padding-left: 6px; }
.mb-name .t { overflow: hidden; text-overflow: ellipsis; padding-right: 1px; max-width: 320px; }
.mb-name .chev, .mb-name .expand { position: absolute; display: grid; place-items: center; color: var(--icon-color); opacity: 0; }
.mb-name .chev { left: 14px; width: 16px; height: 16px; }
.mb-name .chev svg { width: 16px; height: 16px; }
.mb-name .expand { right: 10px; width: 24px; height: 24px; border-radius: var(--border-radius-small); }
.mb-name .expand svg { width: 18px; height: 18px; }
.mb-row-dots { position: absolute; left: -23px; top: 3px; width: 14px; height: 30px; display: grid; place-items: center; color: var(--primary-text-color); opacity: 0; }
.mb-row-dots svg { width: 16px; height: 16px; }
.mb-head .mb-c .add { width: 24px; height: 24px; display: grid; place-items: center; color: var(--icon-color); margin-left: -30px; }
.mb-head .mb-c .add svg { width: 20px; height: 20px; }

/* row hover + selected (measured: hover bg per theme; status cells drop to 70% so the row colour shows through) */
.mb-item:hover > .mb-c { background: var(--mb-row-hover); }
.mb-item:hover .mb-row-dots, .mb-item > .mb-name:hover .chev, .mb-item > .mb-name:hover .expand { opacity: 1; }  /* measured: › and expand show only over the name cell */
.mb-item:hover .mb-status, .mb-item.is-selected .mb-status { opacity: .7; }
.mb-item.is-selected > .mb-c { background: var(--primary-selected-color); }
.mb-item.is-selected > .mb-name { box-shadow: inset 0 0 0 1px var(--secondary-text-color); }
.mb-item.is-selected .chev, .mb-item.is-selected .expand { opacity: 1; }

/* cells */
.mb-status { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-color-on-primary); font: 400 14px/normal var(--font-family);
  background: var(--s); transition: opacity var(--motion-productive-short) linear; cursor: pointer; }
.mb-person { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--primary-background-color); }
.mb-link { color: var(--link-color); text-decoration: none; overflow: hidden; text-overflow: ellipsis; max-width: 124px; padding: 0 1px; }
.mb-link:hover { text-decoration: underline; }
.mb-phone { display: flex; align-items: center; gap: 8px; color: var(--mb-phone); line-height: 25px; margin-top: -2px; }
.mb-phone img { width: 22px; height: 16px; }
.mb-file { width: 17px; height: 24px; }

/* "+ Add item" row: faded strip, 6px rounded bottom-left, soft xs shadow under the group (measured) */
.mb-add { height: 36px; border-bottom: 1px solid var(--layout-border-color); border-bottom-left-radius: 6px; box-shadow: var(--box-shadow-xs); }
.mb-add .mb-ind { opacity: .5; border-bottom-left-radius: 6px; }
.mb-add > .mb-c { border-right: 0; border-bottom: 0; }
.mb-add .mb-name { padding-left: 40px; width: 400px; }
.mb-add .ph { color: var(--disabled-text-color); opacity: .5; font: 400 14px/24px var(--font-family); padding-left: 0; }  /* measured: about 19% strength in every theme */
.mb-add .rest { flex: 1; border-left: 0; }

/* footer: summary row that starts under Person (measured: battery 24px tall, 8px inset; "files" counter 12px) */
.mb-foot { margin-left: 400px; display: flex; height: 36px; background: var(--mb-cell); border: 1px solid var(--layout-border-color); border-top: 0;
  border-bottom-left-radius: 6px; box-shadow: var(--box-shadow-xs); }
.mb-foot > div { flex: none; height: 35px; border-right: 1px solid var(--layout-border-color); display: flex; align-items: center; justify-content: center; }
.mb-foot > div:last-child { border-right: 0; }
.mb-battery { display: flex; width: 123px; height: 24px; background: var(--mb-battery-empty); }
.mb-battery i { height: 24px; display: block; transition: width var(--motion-expressive-short) var(--motion-timing-enter); }
.mb-foot > .mb-files { flex-direction: column; text-align: center; line-height: 1; padding-top: 1px; }
.mb-files b { display: block; font: 400 14px/14px var(--font-family); color: var(--primary-text-color); }
.mb-files span { display: block; font: 400 12px/12px var(--font-family); color: var(--secondary-text-color); }

/* add new group + powered by */
.mb-newgroup { position: absolute; left: 40px; height: 32px; padding: 4px 8px; border: 1px solid var(--disabled-text-color); border-radius: var(--border-radius-small);
  background: transparent; display: inline-flex; align-items: center; gap: 8px; font: 400 14px/24px var(--font-family); color: var(--disabled-text-color); }
.mb-newgroup svg { width: 20px; height: 20px; }
.mb-powered { position: absolute; right: 23px; height: 36px; padding: 0 10px; border-radius: 18px; display: flex; align-items: center; gap: 8px; background: var(--mb-powered-bg);
  font: 500 14px/20px var(--title-font-family); color: #333; }
.mb-powered img { height: 17px; width: auto; }

/* tooltip, as on the board (Vibe Tooltip: inverted colour, 4px corners, 8 x 16 padding, small arrow) */
.mb-tip { position: absolute; z-index: 20; padding: 8px 16px; border-radius: var(--border-radius-small); background: var(--inverted-color-background); color: var(--text-color-on-inverted);
  font: var(--font-text2-normal); box-shadow: var(--box-shadow-medium); white-space: nowrap; pointer-events: none; animation: mb-tip-in var(--motion-productive-medium) var(--motion-timing-enter); }
.mb-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
@keyframes mb-tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* menu, as on the board (Vibe Menu: 8px padding, 4px item corners, medium shadow) */
.mb-menu { position: absolute; z-index: 20; padding: 8px; border-radius: var(--border-radius-medium); background: var(--secondary-background-color); box-shadow: var(--box-shadow-medium);
  min-width: 236px; animation: mb-menu-in var(--motion-productive-long) var(--motion-timing-enter); }
.dark-app-theme .mb-menu { background: var(--allgrey-background-color); }
.mb-menu button { width: 100%; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 18px; border: 0; border-radius: var(--border-radius-small); background: transparent;
  font: var(--font-text2-normal); color: var(--primary-text-color); cursor: pointer; text-align: left; }
.mb-menu button { padding-left: 10px; }
.mb-menu button:hover { background: var(--primary-background-hover-color); }
.mb-menu button svg { width: 16px; height: 16px; color: var(--icon-color); }
@keyframes mb-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .mb-board *, .mb-tip, .mb-menu { animation: none !important; transition: none !important; } }