/* ============================================================================
   Bayan CRM

   Palette sampled from the logo. The measured constraint that shapes
   everything (WCAG 2.1, against white):

     Lime  #B5EC23  1.40:1   cannot carry text
     Cyan  #0BA7CB  2.84:1   cannot carry text
     Deep  #0F719B  5.45:1   passes AA — this is the clickable colour
     Navy  #021E37 16.89:1   passes AAA — this is the ink

   So lime and cyan are surfaces and markers, never ink on white. Lime appears
   on navy, where it reaches 12:1 and looks like the logo does.
   ========================================================================= */

:root {
  --lime:       #b5ec23;
  --lime-light: #c1f077;
  --lime-dark:  #4d6b00;   /* 4.6:1 on white — lime-adjacent text goes here  */
  --lime-tint:  #eef8d3;

  --cyan:       #0ba7cb;
  --cyan-deep:  #0f719b;
  --cyan-dark:  #0a5578;
  --cyan-tint:  #e6f6fb;
  --cyan-pale:  #f4fbfd;

  --navy:       #021e37;
  --navy-soft:  #0a3050;
  --navy-line:  #16436a;

  --ink:        #101e2e;
  --ink-soft:   #4f6579;
  --ink-faint:  #7b8fa1;

  --line:        #e2e8ee;
  --line-strong: #c2ced8;
  --line-soft:  #eef2f6;
  --paper:      #ffffff;
  --page:       #f5f8fa;

  --ok:      #1a7f52;
  --ok-tint: #e3f5ec;
  --warn:      #b47500;
  --warn-tint: #fdf2dc;
  --bad:      #c0392b;
  --bad-tint: #fbe8e5;

  /* Layered rather than single-blur shadows: a tight contact shadow plus a
     wider ambient one is what makes a surface read as lifted rather than
     smudged. */
  --shadow-xs: 0 1px 2px rgba(2, 30, 55, .06);
  --shadow-sm: 0 1px 2px rgba(2, 30, 55, .07), 0 2px 6px -1px rgba(2, 30, 55, .08);
  --shadow-md: 0 2px 4px rgba(2, 30, 55, .06), 0 8px 20px -4px rgba(2, 30, 55, .12);
  --shadow-lg: 0 4px 8px rgba(2, 30, 55, .07), 0 24px 48px -8px rgba(2, 30, 55, .2);
  --shadow-focus: 0 0 0 3px rgba(15, 113, 155, .16);

  /* A touch rounder throughout. The logo is hard tiles, so the interface
     stays restrained — but 3px reads as an accident rather than a decision. */
  --r-sm: 4px;
  --r:    7px;
  --r-lg: 11px;
  --r-xl: 16px;
  --r-full: 999px;

  --sidebar: 244px;

  /* Collapsed, the sidebar is a rail of icons. Wide enough for a 44px target
     with breathing room, narrow enough that a 1280px laptop gets most of its
     screen back. */
  --sidebar-rail: 60px;
  --topbar: 58px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body, #app { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 21px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

a { color: var(--cyan-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd9e2; border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: #b3c1ce; }

/* --- RTL ------------------------------------------------------------------
   Every directional property below is logical (inline-start / inline-end),
   so Arabic mirrors without a second stylesheet. */
[dir="rtl"] { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }

/* ==========================================================================
   Login
   ========================================================================== */

.login {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100%;
  background: var(--paper);
}

/* --- The brand side ------------------------------------------------------ */

.login__brand {
  display: none;
  place-items: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 22% 12%, #0a3a5e 0%, transparent 55%),
    radial-gradient(100% 80% at 85% 88%, #063049 0%, transparent 60%),
    var(--navy);
}

/* A field of faint tiles behind the lockup, echoing the two hard tiles the
   logo itself is built from. Low enough not to compete with it. */
.login__brand::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(11, 167, 203, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 167, 203, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%);
}

/* A single lime rule down the joining edge, the one place the brand green is
   fully legible against navy. */
.login__brand::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--lime) 35%, var(--lime) 65%, transparent);
  opacity: .55;
}

.login__brand-inner { position: relative; text-align: center; }

.login__lockup {
  width: min(380px, 62vw);
  height: auto;
  border-radius: var(--r-sm);
  /* The lockup is a solid block, so a soft drop shadow lifts it off the
     panel rather than letting it look pasted on. */
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

.login__tagline {
  margin: 30px 0 0;
  color: var(--lime);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.login__tagline-sub {
  margin: 8px 0 0;
  color: #7fa3ba;
  font-size: 12.5px;
  letter-spacing: .03em;
}

/* --- The form side ------------------------------------------------------- */

.login__panel {
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  background: var(--paper);
}

.login__panel-top { display: flex; justify-content: flex-end; }

.login__form {
  width: 100%;
  max-width: 348px;
  margin: auto;
  padding-block: 32px;
}

.login__form-mark {
  width: 46px; height: 46px;
  border-radius: var(--r);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}

.login__form h1 {
  font-size: 23px;
  letter-spacing: -.02em;
  margin-bottom: 7px;
}

.login__hint {
  margin: 0 0 26px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

.login__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  border-radius: var(--r);
  background: var(--bad-tint);
  color: var(--bad);
  font-size: 13px;
  animation: shake .3s var(--ease);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.login__forgot {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
}

.login__foot {
  margin-top: auto;
  padding-top: 20px;
  color: var(--ink-faint);
  font-size: 11.5px;
  text-align: center;
}

@media (min-width: 900px) {
  .login { grid-template-columns: 1fr minmax(400px, 452px); }
  .login__brand { display: grid; }
  .login__form-mark { display: none; }
}

/* ==========================================================================
   Shell
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-rows: var(--topbar) minmax(0, 1fr);
  grid-template-areas: "side top" "side main";
  height: 100%;
}

.side {
  grid-area: side;
  /* A hint of depth rather than a flat block; the gradient is barely visible
     but stops the panel reading as a printed rectangle. */
  background: linear-gradient(175deg, #04243f 0%, var(--navy) 55%, #01182c 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 16px;
}

.side__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.side__brand img {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.side__brand-text { line-height: 1.15; }
.side__brand-name { color: #fff; font-weight: 600; font-size: 15px; }
.side__brand-sub { color: #8fb3c9; font-size: 10.5px; letter-spacing: .04em; }

.side__group {
  padding: 16px 21px 6px;
  color: #7fa3ba;              /* 6.4:1 on navy — a heading, not body text */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.side__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-inline: 10px;
  padding: 9px 11px;
  border-radius: var(--r);
  /* Near-white, not a brand tint: these are the most-read words in the app.
     13.4:1 stays legible on a cheap monitor in a bright office. */
  color: #cddced;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.side__link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }

.side__link--on {
  background: rgba(11, 167, 203, .16);
  color: #fff;
  font-weight: 600;
}

/* The active marker is a lime bar inset from the edge rather than a border on
   it — the shape reads as deliberate, and lime on navy is 12:1. */
.side__link--on::before {
  content: "";
  position: absolute;
  inset-inline-start: -10px;
  inset-block: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lime);
}
[dir="rtl"] .side__link--on::before { border-radius: 3px 0 0 3px; }

.side__link svg { flex: none; opacity: .92; }
.side__link--on svg { opacity: 1; }
.side__icon { width: 18px; display: grid; place-items: center; flex: none; }

.side__count {
  margin-inline-start: auto;
  min-width: 20px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.14);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
.side__count--alert { background: var(--bad); color: #fff; }

.top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(2,30,55,.03);
}

.top__user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-full);
  transition: background .15s var(--ease);
}
.top__user:hover { background: var(--line-soft); }
[dir="rtl"] .top__user { padding: 4px 4px 4px 10px; }

.top__title { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.top__spacer { flex: 1; }

.main {
  grid-area: main;
  overflow: auto;
  padding: 20px;
}

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  background: var(--cyan-deep);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  flex: none;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .12);
  letter-spacing: .02em;
}
.avatar--sm { width: 22px; height: 22px; font-size: 9.5px; }

/* ==========================================================================
   Layout across screen sizes

   Three arrangements rather than a gradual squeeze:

     ≥ 1024px   sidebar always visible — a desktop or a landscape tablet
     640–1023   sidebar slides over on demand — portrait tablet
     < 640px    bottom bar — a phone, held one-handed

   The middle case is the one that matters most here. A portrait iPad is
   768px wide; a fixed 244px sidebar would leave 524px for a kanban board
   whose columns are 282px, so barely one column and a half. Sliding it out of
   the way gives the board the whole screen.
   ========================================================================== */

.shell__scrim { display: none; }

@media (max-width: 1023px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "main";
  }

  .side {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 268px;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  [dir="rtl"] .side { transform: translateX(100%); }

  .shell--nav-open .side { transform: translateX(0); }

  /* Tapping outside closes it, which is what everyone expects of a panel
     that slid over the page. */
  .shell--nav-open .shell__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(2, 30, 55, .42);
    animation: fade .16s ease-out;
  }

  .nav-toggle { display: grid; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }

  /* The rail.
     ------------------------------------------------------------------------
     On a 1280px laptop the sidebar was taking 244px — nearly a fifth of the
     screen — from a kanban board that wants every pixel. Collapsed it keeps
     the icons, so navigation is still one click rather than two, and gives
     184px back.

     The width is the only thing that changes. Nothing else in the shell knows
     about it: the grid column is a variable, and every screen inside is
     already fluid, so a wider main area is simply a wider main area. */
  .shell--rail { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }

  .shell--rail .side { padding-inline: 8px; }

  /* Hidden rather than shrunk. A label squeezed to nothing still takes part
     in layout and pushes the icon off centre. */
  .shell--rail .side__brand-text,
  .shell--rail .side__group,
  .shell--rail .side__label { display: none; }

  .shell--rail .side__brand { justify-content: center; padding-inline: 0; }

  .shell--rail .side__link {
    justify-content: center;
    padding-inline: 0;
    gap: 0;
  }

  /* The count still has to be visible, so it becomes a dot on the icon
     rather than a number beside a label that is no longer there. */
  .shell--rail .side__count {
    position: absolute;
    top: 4px;
    inset-inline-end: 6px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;          /* the number is unreadable at 8px; the dot says it */
    border-radius: var(--r-full);
  }
  .shell--rail .side__link { position: relative; }

  /* The group heading is gone, so a rule stands in for it — without one the
     rail is an undifferentiated column of symbols. */
  .shell--rail .side__group + .side__link { margin-top: 10px; }
  .shell--rail .side__sep {
    display: block;
    height: 1px;
    margin: 10px 8px;
    background: rgba(255, 255, 255, .10);
  }
}

.side__sep { display: none; }

/* One mechanism, not two.
   ---------------------------------------------------------------------------
   A laptop between 1024 and 1400 should start on the rail, and it would have
   been easy to write that as a second media query here. That would leave two
   things deciding the same layout — a CSS default and the person's own
   toggle — which disagree the moment somebody resizes a window. So the width
   only chooses the *initial* state, in app.js, and after that .shell--rail is
   the single source of truth. */

/* --- Touch ---------------------------------------------------------------

   Anything meant to be tapped gets 44px, which is the smallest target most
   people can hit reliably. Applied by input type rather than screen width: a
   touchscreen laptop needs it at 1400px, and a mouse on a small window does
   not. */
@media (hover: none) {
  .btn { min-height: 44px; padding-inline: 18px; }
  .btn--sm { min-height: 38px; padding-inline: 14px; }
  .btn--icon { width: 44px; }
  .btn--icon.btn--sm { width: 38px; }

  .input, .select, .textarea { min-height: 44px; font-size: 16px; }
  /* 16px is not a style choice: iOS zooms the page in on any field with
     smaller text, and the zoom does not come back out. */

  .side__link { min-height: 46px; }
  .tab { min-height: 44px; padding-inline: 18px; }
  .chatter__filter-btn { min-height: 36px; }

  .deal { padding: 13px 14px; }
  .deal__act { width: 26px; height: 26px; }
  .star { padding: 3px; }

  table.list td, table.list th { padding-block: 13px; }
  .picker__item, .mention-menu__item { min-height: 44px; }

  /* Hover effects that fire on tap and then stick are worse than none. */
  .deal:hover { transform: none; box-shadow: var(--shadow-xs); }
  .btn:hover { background: var(--paper); }
  .btn--primary:hover { background: linear-gradient(180deg, #1280ad 0%, var(--cyan-deep) 100%); }
}

/* --- Portrait tablet ----------------------------------------------------- */

@media (max-width: 899px) {
  .main { padding: 14px; }

  /* Two panels side by side stop being readable well before the screen is
     narrow enough to look cramped. */
  .grid-2, .detail-grid, .row { grid-template-columns: minmax(0, 1fr); }

  .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

  .col { flex-basis: 76vw; max-width: 320px; }

  /* A drawer that leaves a sliver of page behind it wastes the space it
     needed most. */
  .drawer { width: 100%; }
  .modal { width: 100%; max-height: 92vh; }
  .modal-scrim { padding: 10px; align-items: flex-end; }

  .toolbar { gap: 7px; }
  .toolbar .select, .toolbar .input { min-width: 130px; }
  .toolbar__search { flex-basis: 100%; }

  .top { padding-inline: 12px; gap: 9px; }
  .top__title { font-size: 15px; }
  /* The signed-in name is the first thing to go; the avatar still says who
     you are. */
  .top__user span:not(.avatar) { display: none; }

  .act-pop { width: calc(100vw - 24px) !important; inset-inline: 12px !important; }
}

/* --- Phone --------------------------------------------------------------- */

@media (max-width: 639px) {
  .shell {
    grid-template-rows: var(--topbar) minmax(0, 1fr) auto;
    grid-template-areas: "top" "main" "side";
  }

  /* A slide-over panel needs a hand to reach the far corner. A bottom bar is
     under the thumb. */
  .side {
    position: static;
    transform: none;
    flex-direction: row;
    width: auto;
    padding: 4px;
    overflow-x: auto;
    box-shadow: 0 -2px 12px rgba(2, 30, 55, .18);
    border-top: 1px solid var(--navy-line);
  }
  [dir="rtl"] .side { transform: none; }

  .side__brand, .side__group { display: none; }

  .side__link {
    flex-direction: column;
    gap: 3px;
    min-width: 66px;
    min-height: 52px;
    margin-inline: 2px;
    padding: 6px 4px;
    font-size: 10px;
    text-align: center;
  }
  .side__link--on::before { display: none; }
  .side__link--on { background: rgba(11, 167, 203, .22); }
  .side__link span:not(.side__icon):not(.side__count) { line-height: 1.2; }

  .side__count {
    position: absolute;
    margin: 0;
    transform: translate(15px, -14px);
    min-width: 17px;
    font-size: 9.5px;
  }

  .nav-toggle, .shell__scrim { display: none !important; }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col { flex-basis: 88vw; }
  .main { padding: 12px; }

  .card__body, .card__head { padding-inline: 13px; }
}

/* --- While a card is being dragged ---------------------------------------

   Everything that could steal the gesture is switched off: text selection,
   the browser's own scroll handling, and the long-press callout on iOS. */
body.is-dragging {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
  touch-action: none;
}
body.is-dragging * { cursor: grabbing !important; }

.deal { touch-action: manipulation; }

.drag-ghost {
  opacity: .92;
  box-shadow: var(--shadow-lg);
  transition: none;
}

.nav-toggle {
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--line-soft); color: var(--ink); }

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding-inline: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: background .15s var(--ease), border-color .15s var(--ease),
              box-shadow .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--line-soft); border-color: var(--line-strong); }
/* A press should feel like a press. One pixel is enough. */
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn svg { flex: none; }

.btn--primary {
  background: linear-gradient(180deg, #1280ad 0%, var(--cyan-deep) 100%);
  border-color: var(--cyan-dark);
  color: #fff;
  box-shadow: 0 1px 2px rgba(4, 60, 84, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--cyan-deep) 0%, var(--cyan-dark) 100%);
  border-color: var(--cyan-dark);
}
.btn--primary:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); }

.btn--win {
  background: linear-gradient(180deg, #1f9260 0%, var(--ok) 100%);
  border-color: #14664a; color: #fff;
  box-shadow: 0 1px 2px rgba(10, 60, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--win:hover { background: linear-gradient(180deg, var(--ok) 0%, #166b45 100%); }
.btn--lose { background: var(--paper); border-color: var(--bad); color: var(--bad); }
.btn--lose:hover { background: var(--bad-tint); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn--ghost:hover { background: var(--line-soft); color: var(--ink); }
.btn--sm { height: 30px; padding-inline: 11px; font-size: 12.5px; gap: 5px; }
.btn--icon { width: 34px; padding-inline: 0; }
.btn--icon.btn--sm { width: 30px; }
.btn--block { width: 100%; }

.input, .select, .textarea {
  width: 100%;
  height: 36px;
  padding-inline: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--cyan-deep);
  outline: none;
  box-shadow: var(--shadow-focus);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

/* A native arrow sits at the wrong end in RTL and looks foreign in both
   directions, so it is replaced with one drawn in the right place. */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234f6579' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-inline-end: 30px;
}
[dir="rtl"] .select { background-position: left 11px center; }
.textarea { height: auto; min-height: 84px; padding: 9px 10px; resize: vertical; }

.field { margin-bottom: 14px; }
.field__label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.field__hint { margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); }

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 0 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding-inline: 10px;
  border-radius: var(--r-full);
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
}
.chip--brand { background: var(--cyan-tint); color: var(--cyan-dark); }
.chip--lime  { background: var(--lime-tint); color: var(--lime-dark); }
.chip--ok    { background: var(--ok-tint);   color: var(--ok); }
.chip--bad   { background: var(--bad-tint);  color: var(--bad); }
.chip--warn  { background: var(--warn-tint); color: var(--warn); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 17px;
  border-bottom: 1px solid var(--line-soft);
}
.card__head h2 { font-size: 14.5px; font-weight: 650; }
.card__body { padding: 16px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar:last-of-type { margin-bottom: 16px; }
.toolbar .input, .toolbar .select { width: auto; min-width: 150px; }
.toolbar__search { flex: 1 1 240px; min-width: 200px !important; }

.muted { color: var(--ink-soft); }
.tiny { font-size: 11.5px; }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }

.empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 64px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.empty__icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: 4px;
  border-radius: var(--r-lg);
  background: var(--cyan-tint);
  color: var(--cyan-deep);
  font-size: 26px;
}
.empty h2 { color: var(--ink); }
.empty p { margin: 0; max-width: 42ch; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--cyan-deep);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Kanban
   ========================================================================== */

.kanban {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 12px;
  min-height: 60vh;
}

.col {
  flex: 0 0 282px;
  display: flex;
  flex-direction: column;
  background: #eaeff4;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  max-height: calc(100vh - 200px);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.col--over {
  border-color: var(--cyan);
  background: var(--cyan-tint);
  box-shadow: inset 0 0 0 1px var(--cyan);
}
.col--won .col__title { color: var(--ok); }

.col__head {
  padding: 11px 12px 8px;
  border-top: 3px solid var(--cyan);
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
}
/* The won column reads green without needing a label. */
.col--won .col__head { border-top-color: var(--ok); }
.col__title-row { display: flex; align-items: center; gap: 7px; }
.col__title { font-weight: 650; font-size: 13px; letter-spacing: -.01em; }
.col__n {
  min-width: 19px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: #dbe3ea;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.col__totals {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.col__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 8px 10px;
  overflow-y: auto;
}
.col__empty {
  padding: 18px 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
}

.deal {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 12px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .16s var(--ease), transform .16s var(--ease),
              border-color .16s var(--ease);
}
.deal:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
.deal:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.deal--drag { opacity: .4; transform: rotate(2deg) scale(.98); }

.deal__title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
  padding-inline-end: 18px;   /* room for the priority stars */
}
.deal__partner { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 8px; }

.deal__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.deal__tag {
  height: 17px;
  padding-inline: 7px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
}

.deal__foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.deal__money {
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.deal__spacer { flex: 1; }

.deal__stars {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-end: 10px;
  display: flex;
  gap: 1px;
  font-size: 11px;
  letter-spacing: -1px;
}
.star { color: #d3dce4; cursor: pointer; }
.star--on { color: #f0a500; }

/* The activity dot is the heart of the workflow: at a glance, which deals are
   being worked and which have been forgotten. */
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}
.dot--overdue { background: var(--bad); }
.dot--today   { background: var(--warn); }
.dot--planned { background: var(--ok); }
.dot--none    { background: #cfd9e2; }

/* ==========================================================================
   List
   ========================================================================== */

.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }

table.list th {
  position: sticky; top: 0; z-index: 2;
  box-shadow: 0 1px 0 var(--line);
  background: var(--paper);
  padding: 9px 12px;
  text-align: start;             /* logical: follows reading direction */
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .03em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
table.list th:hover { color: var(--ink); }

table.list td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.list tbody tr { cursor: pointer; }
table.list tbody tr { transition: background .1s; }
table.list tbody tr:hover { background: var(--cyan-pale); }
table.list tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Drawer + modal
   ========================================================================== */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2,30,55,.42);
  display: flex;
  justify-content: flex-end;   /* opens from the reading-end edge */
  animation: fade .14s ease-out;
}
@keyframes fade { from { opacity: 0; } }

.drawer {
  width: min(680px, 100%);
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slide .18s cubic-bezier(.16,1,.3,1);
}
@keyframes slide { from { transform: translateX(24px); opacity: .6; } }
[dir="rtl"] .drawer { animation-name: slide-rtl; }
@keyframes slide-rtl { from { transform: translateX(-24px); opacity: .6; } }

.drawer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer__body { flex: 1; overflow-y: auto; padding: 18px; }
.drawer__foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--page);
}

.modal-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(2,30,55,.42);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fade .14s ease-out;
}
.modal {
  width: min(440px, 100%);
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal__head { padding: 16px 18px 0; }
.modal__body { padding: 14px 18px; }
.modal__foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 12px 18px; background: var(--page); border-top: 1px solid var(--line);
}

/* ==========================================================================
   Record detail
   ========================================================================== */

.rec__banner {
  padding: 7px 18px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.rec__banner--won  { background: var(--ok-tint);  color: var(--ok); }
.rec__banner--lost { background: var(--bad-tint); color: var(--bad); }

.rec__money {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rec__prob { font-size: 12.5px; color: var(--ink-soft); }

.stagebar { display: flex; gap: 3px; margin: 14px 0 18px; }
.stagebar__step {
  flex: 1;
  padding: 6px 4px;
  border: none;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stagebar__step:first-child { border-start-start-radius: var(--r); border-end-start-radius: var(--r); }
.stagebar__step:last-child  { border-start-end-radius: var(--r);  border-end-end-radius: var(--r); }
.stagebar__step:hover { background: #dde5ec; }
.stagebar__step--on { background: var(--cyan-deep); color: #fff; }
.stagebar__step--done { background: var(--cyan-tint); color: var(--cyan-dark); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab {
  padding: 9px 15px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab--on { color: var(--cyan-deep); border-bottom-color: var(--cyan-deep); font-weight: 600; }

.act {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.act:last-child { border-bottom: none; }
.act__icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--line-soft);
  font-size: 14px;
  flex: none;
}
.act__icon--overdue { background: var(--bad-tint); }
.act__icon--today   { background: var(--warn-tint); }
.act__icon--planned { background: var(--ok-tint); }
.act__main { flex: 1; min-width: 0; }
.act__summary { font-weight: 500; font-size: 13px; }
.act__meta { font-size: 11.5px; color: var(--ink-soft); }
.act--done .act__summary { color: var(--ink-faint); text-decoration: line-through; }

.msg { display: flex; gap: 10px; padding: 11px 0; }
.msg__body { flex: 1; min-width: 0; }
.msg__meta { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 2px; }
.msg__text { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ==========================================================================
   Dashboard
   ========================================================================== */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kpi {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--cyan);
}
.kpi--alert::before { background: var(--bad); }
.kpi--alert { border-color: var(--bad); }
.kpi__label { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; letter-spacing: .03em; }
.kpi__value {
  font-size: 25px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: 2px;
}
.kpi__sub { font-size: 11.5px; color: var(--ink-faint); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 14px; }

/* The live indicator. Slow and shallow on purpose: a dashboard left on a wall
   should read as alive, not as something demanding attention. */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes pulse { 0%, 100% { opacity: 1; } }
}

.bar { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.bar__label { width: 116px; font-size: 12.5px; flex: none; }
.bar__track { flex: 1; height: 20px; background: var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.bar__fill { height: 100%; background: var(--cyan-deep); border-radius: var(--r-sm); }
.bar__fill--won { background: var(--ok); }
.bar__value { width: 116px; text-align: end; font-size: 12.5px; font-variant-numeric: tabular-nums; flex: none; }

/* ==========================================================================
   Toast
   ========================================================================== */

.toasts {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  min-width: 230px;
  max-width: 380px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  box-shadow: var(--shadow-md);
  animation: rise .18s cubic-bezier(.16,1,.3,1);
}
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.toast--bad { background: var(--bad); }
.toast--ok  { background: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ==========================================================================
   Contact picker
   ========================================================================== */

.picker { position: relative; }

.picker__box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  cursor: text;
}
.picker__box:focus-within { border-color: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(15,113,155,.12); }

.picker__input { flex: 1; min-width: 60px; border: none; outline: none; background: none; height: 26px; }

.picker__chosen {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.picker__chosen-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__chosen-sub { font-size: 11.5px; color: var(--ink-soft); }

.picker__menu {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 3px);
  z-index: 40;
  max-height: 280px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 4px;
}

.picker__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  text-align: start;
  cursor: pointer;
  font-size: 13px;
}
.picker__item:hover, .picker__item--active { background: var(--cyan-tint); }
.picker__item--create { color: var(--cyan-deep); font-weight: 600; border-top: 1px solid var(--line-soft); border-radius: 0; }
.picker__item-main { flex: 1; min-width: 0; }
.picker__item-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__item-sub { font-size: 11.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__empty { padding: 12px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

/* ==========================================================================
   Selection + bulk bar
   ========================================================================== */

.check {
  width: 16px; height: 16px;
  accent-color: var(--cyan-deep);
  cursor: pointer;
  flex: none;
}

table.list tbody tr.is-selected { background: var(--cyan-tint); }
table.list tbody tr.is-selected:hover { background: #d9eff7; }

.bulkbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  margin-bottom: 12px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  animation: rise .16s cubic-bezier(.16,1,.3,1);
}
.bulkbar__count { font-weight: 600; }
.bulkbar .btn {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  height: 28px;
  font-size: 12.5px;
}
.bulkbar .btn:hover { background: rgba(255,255,255,.2); }
.bulkbar .select {
  height: 28px;
  width: auto;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  font-size: 12.5px;
}
.bulkbar .select option { color: var(--ink); }

/* ==========================================================================
   Grouping
   ========================================================================== */

.grouphead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--page);
  border-block: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  font-weight: 600;
}
.grouphead:hover { background: #eef3f7; }
.grouphead__caret { width: 12px; color: var(--ink-soft); transition: transform .14s; }
.grouphead__caret--open { transform: rotate(90deg); }
[dir="rtl"] .grouphead__caret { transform: rotate(180deg); }
[dir="rtl"] .grouphead__caret--open { transform: rotate(90deg); }
.grouphead__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.grouphead__count { color: var(--ink-soft); font-weight: 500; }
.grouphead__total { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 500; }

/* ==========================================================================
   Stale marker
   ========================================================================== */

.deal--stale { border-inline-start: 3px solid var(--warn); }
.stale-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
}

/* ==========================================================================
   Detail layout
   ========================================================================== */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 780px) {
  .detail-grid { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .85fr); }
}

.sidecard {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}
.sidecard + .sidecard { margin-top: 12px; }
.sidecard__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 9px;
}

.kv { display: flex; gap: 10px; padding: 4px 0; font-size: 13px; }
.kv__k { width: 92px; flex: none; color: var(--ink-soft); }
.kv__v { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   Print — the PDF route
   ========================================================================== */

@media print {
  .side, .top, .toolbar, .bulkbar, .btn, .tabs, .drawer__foot, .toasts { display: none !important; }
  .shell { display: block; height: auto; }
  .main { overflow: visible; padding: 0; }
  .card { border: none; box-shadow: none; }
  table.list th { background: #eef2f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.list tbody tr { page-break-inside: avoid; }
  .print-only { display: block !important; }
  @page { margin: 14mm; }
}
.print-only { display: none; }

/* While a document is being printed, it is the only thing that exists.
   Written as "everything except the holder" rather than a list of things to
   hide, because drawers, modals, toasts and popovers are all appended to
   <body>, and any list of them would be one entry short the day somebody
   adds another overlay. */
body.printing > *:not(#print-holder) { display: none !important; }

.print-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--navy);
}
.print-head img { width: 42px; height: 42px; }
.print-head h1 { font-size: 18px; }
.print-head__meta { margin-inline-start: auto; text-align: end; font-size: 11.5px; color: var(--ink-soft); }


/* ==========================================================================
   Pipeline card — next activity
   ========================================================================== */

/* Open activities, as a row of icons.
   Each is coloured by its own due date rather than by the earliest, so a card
   carrying something overdue and something planned shows both at once. */
.deal__acts {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
}

.deal__act {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.deal__act:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }

.deal__act--overdue { background: var(--bad-tint);  color: var(--bad); }
.deal__act--today   { background: var(--warn-tint); color: var(--warn); }
.deal__act--planned { background: var(--ok-tint);   color: var(--ok); }

/* Nothing scheduled: the single most useful thing this board can tell a
   manager, so it is drawn rather than left blank. Hollow, so it reads as an
   absence rather than another item. */
.deal__act--none {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--ink-faint);
  cursor: default;
}
.deal__act--none:hover { transform: none; box-shadow: none; }

.deal__act--more {
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  width: auto;
  min-width: 20px;
  padding-inline: 5px;
}

/* --- The list behind the icons ------------------------------------------ */

.act-pop {
  position: fixed;
  z-index: 70;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop .14s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }

.act-pop__head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--page);
}
.act-pop__head strong { display: block; font-size: 12.5px; }
.act-pop__head .tiny {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.act-pop__list { max-height: 232px; overflow-y: auto; }

.act-pop__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.act-pop__row:last-child { border-bottom: none; }

.act-pop__summary {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.act-pop__foot { padding: 9px 12px; border-top: 1px solid var(--line-soft); background: var(--page); }

.deal__quotes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-deep);
}

/* ==========================================================================
   Quotation document (print)
   ========================================================================== */

.quotedoc { font-size: 12px; line-height: 1.5; color: #101e2e; }

.quotedoc__head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 18px;
}
.quotedoc__logo { width: 190px; height: auto; margin-bottom: 10px; display: block; }
.quotedoc__from { font-size: 11px; line-height: 1.55; }
.quotedoc__from strong { font-size: 13px; display: block; margin-bottom: 3px; }

.quotedoc__meta { text-align: end; min-width: 240px; }
.quotedoc__meta h1 {
  font-size: 22px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.quotedoc__meta table { margin-inline-start: auto; border-collapse: collapse; }
.quotedoc__meta td { padding: 2px 0 2px 14px; font-size: 11.5px; text-align: end; }
.quotedoc__meta td:first-child { color: #4f6579; padding-inline-start: 0; }

.quotedoc__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7b8fa1;
  margin-bottom: 3px;
}

.quotedoc__to { margin-bottom: 16px; font-size: 12px; }
.quotedoc__to strong { font-size: 14px; }

.quotedoc__subject {
  font-size: 14px;
  padding: 8px 10px;
  background: var(--cyan-tint);
  border-inline-start: 3px solid var(--cyan-deep);
  margin-bottom: 14px;
}

.quotedoc__lines { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.quotedoc__lines th {
  padding: 7px 8px;
  background: var(--navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: start;
}
.quotedoc__lines td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.quotedoc__lines tbody tr:nth-child(even) { background: #f7fafc; }
.quotedoc__lines .tiny { font-size: 10px; color: #4f6579; }

.quotedoc__totals { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.quotedoc__totals table { min-width: 280px; border-collapse: collapse; }
.quotedoc__totals td { padding: 5px 10px; font-size: 12px; }
.quotedoc__totals td:last-child { text-align: end; font-weight: 600; }
.quotedoc__grand td {
  border-top: 2px solid var(--navy);
  font-size: 15px;
  font-weight: 700;
  padding-top: 8px;
  color: var(--navy);
}

.quotedoc__words {
  padding: 9px 11px;
  background: var(--lime-tint);
  border-inline-start: 3px solid var(--lime);
  font-size: 11.5px;
  margin-bottom: 16px;
}

.quotedoc__block { margin-bottom: 12px; }
.quotedoc__block div { font-size: 11.5px; }
.quotedoc__terms { font-size: 11.5px; }

.quotedoc__signatures {
  display: flex;
  gap: 48px;
  margin-top: 30px;
  page-break-inside: avoid;
}
.quotedoc__signatures > div { flex: 1; }
.quotedoc__rule { height: 34px; border-bottom: 1px solid #101e2e; margin-bottom: 5px; }

.quotedoc__footer {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: #7b8fa1;
  text-align: center;
}

@media print {
  .quotedoc__lines thead { display: table-header-group; }
  .quotedoc__lines tr { page-break-inside: avoid; }
  .quotedoc__lines th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .quotedoc__subject, .quotedoc__words {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ==========================================================================
   Chatter
   ========================================================================== */

.chatter__actions { display: flex; gap: 8px; margin-bottom: 12px; }

.chatter__compose {
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 12px;
  overflow: hidden;
}
/* An outgoing message is visually distinct from an internal note, because
   sending one to a customer by accident is the mistake to design against. */
.chatter__compose--email { border-color: var(--cyan-deep); }

.chatter__compose-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--line-soft);
  font-size: 12.5px;
  font-weight: 600;
}
.chatter__compose--email .chatter__compose-head {
  background: var(--cyan-deep);
  color: #fff;
}

.chatter__followers {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}

.chatter__follower {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding-inline: 7px;
  border-radius: var(--r-full);
  background: var(--line-soft);
  font-size: 11.5px;
}
.chatter__follower-x {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 10px;
  padding: 0 1px;
}
.chatter__follower-x:hover { color: var(--bad); }

.chatter__filter { display: flex; gap: 3px; margin-bottom: 10px; }
.chatter__filter-btn {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--paper);
  font-size: 11.5px;
  cursor: pointer;
  color: var(--ink-soft);
}
.chatter__filter-btn:hover { background: var(--line-soft); }
.chatter__filter-btn--on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}

.chatter__thread { display: flex; flex-direction: column; }

.chatter__msg {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.chatter__msg:last-child { border-bottom: none; }

/* Incoming mail is tinted so a customer's reply is findable at a glance in a
   thread that is mostly internal notes. */
.chatter__msg--in {
  background: var(--lime-tint);
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: var(--r-sm);
}
.chatter__msg--out { background: var(--cyan-pale); margin-inline: -8px; padding-inline: 8px;
                     border-radius: var(--r-sm); }

.chatter__body { flex: 1; min-width: 0; }

.chatter__meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.chatter__meta strong { color: var(--ink); font-size: 12.5px; }

.chatter__tag {
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: rgba(2, 30, 55, .08);
  font-size: 10px;
  font-weight: 600;
}
.chatter__when { margin-inline-start: auto; opacity: .8; }

.chatter__text { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }

.chatter__system {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-style: italic;
}
.chatter__system-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
  flex: none;
}

/* ==========================================================================
   Template editor
   ========================================================================== */

.tpl-editor {
  width: 100%;
  min-height: 340px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #0a1420;
  color: #d8e4ee;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  resize: vertical;
}
.tpl-editor:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(11,167,203,.2); }

.tpl-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: var(--r);
  font-size: 12.5px;
  margin-top: 9px;
}
.tpl-status--ok  { background: var(--ok-tint);  color: var(--ok); }
.tpl-status--bad { background: var(--bad-tint); color: var(--bad); }

.logo-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  margin-bottom: 10px;
}
.logo-preview img { max-width: 180px; max-height: 70px; }


/* ==========================================================================
   Template preview
   ========================================================================== */

.tpl-preview__stage {
  /* A grey desk behind a white sheet — the convention every print preview
     uses, and it makes the page edges legible without a border. */
  background: #4a5a68;
  border-radius: var(--r);
  padding: 22px;
  overflow: auto;
  max-height: 62vh;
}

.tpl-preview__paper {
  background: #fff;
  margin: 0 auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  /* Shown at the real paper width so column widths and line lengths are what
     will actually print. Scaled down to fit, not reflowed. */
  transform-origin: top center;
  zoom: .62;
}

@media (max-width: 899px) { .tpl-preview__paper { zoom: .4; } }

/* ==========================================================================
   Icon alignment
   ========================================================================== */

.empty__icon svg { display: block; }
.act__icon svg, .side__icon svg { display: block; }
.chip svg, .btn svg { display: block; }
.stale-flag svg { display: block; }

.sort-arrow { display: inline-grid; place-items: center; margin-inline-start: 3px; opacity: .7; }
[dir="rtl"] .sort-arrow svg { transform: scaleX(-1); }

/* ==========================================================================
   Avatars with photos
   ========================================================================== */

/* The photo fills the circle rather than letterboxing, because a portrait
   cropped to a square beats one floating in bands of background colour. */
/* Laid over the initials rather than beside them. The parent is a grid, so a
   second child would otherwise be placed in its own row — which is exactly
   what happened: the photo appeared under the letter instead of replacing it.
   Absolute positioning also keeps the initials underneath as a fallback, so a
   photo that fails to load reveals them again. */
.avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.avatar--photo { box-shadow: inset 0 0 0 1px rgba(2, 30, 55, .12); }

/* ==========================================================================
   Profile
   ========================================================================== */

.profile__picture {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
}

.profile__preview {
  width: 72px; height: 72px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 650;
  color: #fff;
  flex: none;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.profile__preview img { width: 100%; height: 100%; object-fit: cover; }

.profile__swatches { display: flex; gap: 7px; flex-wrap: wrap; }

.profile__swatch {
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s var(--ease);
}
.profile__swatch:hover { transform: scale(1.12); }
.profile__swatch--on {
  border-color: var(--paper);
  box-shadow: 0 0 0 2px var(--navy);
}

/* ==========================================================================
   Notification bell
   ========================================================================== */

.bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.bell:hover { background: var(--line-soft); color: var(--ink); }

.bell__badge {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: var(--r-full);
  background: var(--bad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}

/* A quiet pulse the first time a count appears, so something arriving while
   you are looking elsewhere is noticed without being loud about it. */
@keyframes bell-arrive {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.bell__badge--new { animation: bell-arrive .4s var(--ease); }

/* ==========================================================================
   Notification list
   ========================================================================== */

.notif { display: flex; flex-direction: column; }

.notif__row {
  display: flex;
  gap: 11px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .12s;
}
.notif__row:hover { background: var(--cyan-pale); }
.notif__row:last-child { border-bottom: none; }

/* Unread carries a tinted ground and a marker; read fades back so the two
   are distinguishable at a glance rather than by reading dates. */
.notif__row--unread { background: var(--cyan-tint); }
.notif__row--unread:hover { background: #d9eff7; }

.notif__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan-deep);
  flex: none;
  margin-top: 7px;
}
.notif__row:not(.notif__row--unread) .notif__dot { background: transparent; }

.notif__body { flex: 1; min-width: 0; }
.notif__title { font-size: 13px; font-weight: 600; }
.notif__text {
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif__when { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

.notif__kind {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  flex: none;
}
.notif__kind--assignment { background: var(--cyan-tint); color: var(--cyan-deep); }
.notif__kind--activity   { background: var(--warn-tint); color: var(--warn); }
.notif__kind--mention    { background: var(--lime-tint); color: var(--lime-dark); }
.notif__kind--channel    { background: var(--line-soft); color: var(--ink-soft); }
.notif__kind--quotation  { background: var(--ok-tint);   color: var(--ok); }

/* ==========================================================================
   Team chat
   ========================================================================== */

.channel { display: flex; flex-direction: column; height: 100%; }

.channel__list {
  flex: 1;
  overflow-y: auto;
  padding-inline: 2px;
}

.channel__msg { display: flex; gap: 10px; padding: 10px 0; }

/* Consecutive messages from the same person drop the repeated name and
   avatar — a wall of identical headers is harder to read, not easier. */
.channel__msg--same { padding-top: 2px; }
.channel__msg--same .channel__meta { display: none; }
.channel__msg--same .avatar { visibility: hidden; height: 0; }

.channel__body { flex: 1; min-width: 0; }
.channel__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.channel__meta strong { color: var(--ink); font-size: 12.5px; }
.channel__text { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }

.channel__compose {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 8px;
}

/* ==========================================================================
   Mentions
   ========================================================================== */

.mention {
  color: var(--cyan-dark);
  background: var(--cyan-tint);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  font-weight: 600;
}

/* Your own name stands out, because the whole point of a mention is that you
   find it in a thread you were skimming. */
.mention--me { background: var(--lime-tint); color: var(--lime-dark); }

.mention-menu {
  position: absolute;
  z-index: 60;
  min-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 4px;
}

.mention-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  text-align: start;
  cursor: pointer;
  font-size: 13px;
}
.mention-menu__item:hover,
.mention-menu__item--active { background: var(--cyan-tint); }

.mention-menu__name { font-weight: 500; }
.mention-menu__sub { font-size: 11.5px; color: var(--ink-soft); }

/* ==========================================================================
   Printed letterhead
   ========================================================================== */

/* The same company details a quotation carries, so an exported list and a
   quotation sent to the same customer look like one business wrote both. */
.print-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--navy);
}
.print-head img { width: 150px; height: auto; flex: none; }
.print-head h1 { font-size: 17px; margin-bottom: 3px; }
.print-head__detail { font-size: 10.5px; color: var(--ink-soft); line-height: 1.5; }
.print-head__meta {
  margin-inline-start: auto;
  text-align: end;
  font-size: 10.5px;
  color: var(--ink-soft);
  flex: none;
  line-height: 1.6;
}

.print-foot {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--ink-faint);
  text-align: center;
}

@media print {
  .print-head img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   Data controls
   ========================================================================== */

/* Set apart on purpose. These are the only settings that destroy or invent
   records, so they should not look like the rest of the page. */
.danger-zone {
  border-color: var(--warn);
  grid-column: 1 / -1;
}
.danger-zone .card__head {
  background: var(--warn-tint);
  border-bottom-color: var(--warn);
}
.danger-zone .card__head h2 { color: var(--warn); }

.danger-zone__mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--warn);
  color: #fff;
  flex: none;
}

.danger-zone__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.danger-zone__row:first-of-type { border-top: none; }

/* ==========================================================================
   Safe areas

   A tablet's rounded corners and home indicator overlap the page. These keep
   the bottom navigation and the drawer footer clear of them without leaving a
   grey band on hardware that has neither.
   ========================================================================== */

@supports (padding: max(0px)) {
  @media (max-width: 639px) {
    .side { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  }

  .drawer__foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .modal__foot  { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .top { padding-inline-start: max(20px, env(safe-area-inset-left)); }
}

/* A drawer taller than the screen must scroll its body, not the page behind
   it — otherwise the footer buttons end up unreachable on a short screen. */
.drawer { max-height: 100dvh; }
.modal  { max-height: 92dvh; }

@supports not (height: 100dvh) {
  .drawer { max-height: 100vh; }
  .modal  { max-height: 92vh; }
}

/* Momentum scrolling inside panels, which iOS does not apply by default to
   anything but the page itself. */
.drawer__body, .modal__body, .col__cards, .table-wrap, .kanban {
  -webkit-overflow-scrolling: touch;
}

/* The board scrolls column by column on a touch screen rather than drifting
   to a stop halfway between two. */
@media (hover: none) {
  .kanban {
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 12px;
  }
  .col { scroll-snap-align: start; }
}

/* ==========================================================================
   Moving a card without a mouse
   ========================================================================== */

.deal__move {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  flex: none;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.deal__move:hover { background: var(--cyan-tint); color: var(--cyan-deep); }
[dir="rtl"] .deal__move svg { transform: scaleX(-1); }

.stage-pop {
  position: fixed;
  z-index: 70;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop .14s var(--ease);
}

.stage-pop__head {
  padding: 9px 12px;
  background: var(--page);
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stage-pop__list { max-height: 260px; overflow-y: auto; padding: 4px; }

.stage-pop__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  text-align: start;
  font-size: 13px;
  cursor: pointer;
}
.stage-pop__item:hover { background: var(--cyan-tint); }
.stage-pop__item--on { color: var(--cyan-deep); font-weight: 600; }

/* ==========================================================================
   Touch and tablet
   ==========================================================================

   Two separate concerns, deliberately handled by two separate queries.

   `pointer: coarse` is about the *input*: a fingertip covers roughly 9mm, so
   every target grows regardless of how wide the screen is. A tablet in
   landscape is as wide as a laptop but still needs bigger buttons.

   The width queries are about *layout*: what fits.
   ========================================================================== */

@media (pointer: coarse) {
  /* The usual guidance is a 44px minimum. Controls that sit inside dense
     rows get there through padding rather than height, so the layout does
     not stretch. */
  .btn { min-height: 44px; padding-inline: 18px; }
  .btn--sm { min-height: 38px; padding-inline: 14px; }
  .btn--icon { width: 44px; }
  .btn--icon.btn--sm { width: 38px; }

  .input, .select, .textarea { min-height: 44px; }

  /* iOS zooms the whole page when a focused input is under 16px. */
  .input, .select, .textarea, .picker__input { font-size: 16px; }

  .side__link { padding: 12px 12px; }
  .tab { padding: 12px 16px; }
  .chatter__filter-btn { padding: 8px 14px; }

  .deal { padding: 13px 14px; }
  .deal__move { width: 30px; height: 30px; }
  .deal__act { width: 26px; height: 26px; }
  .deal__act--more { min-width: 26px; }
  .star { padding: 3px; }

  .check { width: 20px; height: 20px; }

  table.list td { padding: 13px 13px; }
  table.list th { padding: 12px 13px; }

  .picker__item, .mention-menu__item, .stage-pop__item, .act-pop__row {
    padding-block: 11px;
  }

  .profile__swatch { width: 34px; height: 34px; }

  .chatter__follower-x { padding: 6px; }

  /* Hover states are meaningless without a pointer and leave a control
     looking stuck after a tap. */
  .deal:hover { transform: none; box-shadow: var(--shadow-xs); }
  .btn:hover { background: var(--paper); }
  .btn--primary:hover { background: linear-gradient(180deg, #1280ad 0%, var(--cyan-deep) 100%); }
}

/* --- Tablet landscape ---------------------------------------------------- */

@media (max-width: 1200px) {
  :root { --sidebar: 220px; }
  .main { padding: 16px; }
  .kanban { gap: 10px; }
  .col { flex: 0 0 260px; }
}

/* --- Tablet portrait ----------------------------------------------------- */

/* Two sidebar states, not three.
   ---------------------------------------------------------------------------
   This block used to collapse the sidebar to icons at 1024px and below, which
   fought the off-canvas drawer defined for 1023px and below — so under 1024
   both applied, and the drawer that slid over the page arrived with its labels
   hidden for no reason. At exactly 1024px it was icons-only *and* matched the
   min-width: 1024px rule written for large screens.

   There are only two honest states:

     under 1024px   the sidebar slides over the page, labels and all. It is
                    covering the content anyway, so there is room for them.
     1024px and up  it is permanent, and .shell--rail decides whether it shows
                    labels or just icons. The person chooses; the choice sticks.

   The layout rules that were mixed in here had nothing to do with the sidebar
   and are kept. */
@media (max-width: 1023px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .drawer { width: min(600px, 100%); }
  .toolbar__search { flex: 1 1 100%; }
}

/* --- Small tablet and large phone ---------------------------------------- */

@media (max-width: 820px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar) minmax(0, 1fr) auto;
    grid-template-areas: "top" "main" "side";
  }

  /* Navigation moves to the bottom, where a thumb reaches. */
  .side {
    flex-direction: row;
    overflow-x: auto;
    padding: 4px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .side__brand { display: none; }
  .side__link {
    flex-direction: column;
    gap: 3px;
    min-width: 66px;
    min-height: 52px;
    justify-content: center;
    font-size: 10px;
    margin-inline: 2px;
  }
  .side__link span:not(.side__icon):not(.side__count) {
    display: block;
    font-size: 10px;
  }
  .side__link--on::before {
    inset: auto 8px 0 8px;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }

  .main { padding: 12px; }

  /* A drawer at this width is the screen. */
  .drawer { width: 100%; }
  .scrim { justify-content: stretch; }

  .modal { width: 100%; max-height: 92vh; }
  .modal-scrim { padding: 10px; align-items: flex-end; }

  .kpis { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }

  .col { flex: 0 0 82vw; max-width: 320px; }

  .toolbar { gap: 7px; }
  .toolbar .select, .toolbar .input { flex: 1 1 140px; min-width: 0; }

  .quotedoc__head { flex-direction: column; gap: 14px; }
  .quotedoc__meta { text-align: start; min-width: 0; }
  .quotedoc__meta table { margin-inline-start: 0; }
  .quotedoc__meta td { text-align: start; }

  .print-head { flex-wrap: wrap; }
  .print-head__meta { margin-inline-start: 0; text-align: start; }
}

/* --- Phone --------------------------------------------------------------- */

@media (max-width: 560px) {
  .main { padding: 10px; }
  .card__body { padding: 13px; }
  .drawer__body { padding: 14px; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .col { flex: 0 0 88vw; }
  .danger-zone__row { flex-direction: column; align-items: stretch; }
  .top__user span { display: none; }
}

/* Landscape on a short screen: the top bar and bottom nav together can leave
   almost nothing for the content. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --topbar: 48px; }
  .side__link { min-height: 42px; font-size: 9.5px; }
  .col { max-height: calc(100vh - 150px); }
}

/* An iPad's home indicator overlaps the bottom of the screen; without this
   the last row of navigation sits underneath it. */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 820px) {
    .side { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
    .toasts { inset-block-end: calc(18px + env(safe-area-inset-bottom)); }
  }
}

/* Momentum scrolling inside the kanban and any long list. */
.kanban, .col__cards, .table-wrap, .drawer__body, .act-pop__list, .stage-pop__list {
  -webkit-overflow-scrolling: touch;
}

/* A horizontal board on a touch screen should snap to columns rather than
   drifting between two of them. */
@media (pointer: coarse) {
  .kanban { scroll-snap-type: x proximity; }
  .col { scroll-snap-align: start; }
}

/* ==========================================================================
   Folded stages
   ==========================================================================

   Won and Lost accumulate for the life of the business. Left open they would
   take a third of the board's width to show deals nobody is working on, so
   they collapse to a strip that still carries the count and the total.
   ========================================================================== */

.col--folded {
  flex: 0 0 56px;
  align-items: center;
  padding: 12px 0 14px;
  cursor: pointer;
  background: #e4eaf0;
  border-top: 3px solid var(--line-strong);
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
  transition: background .15s var(--ease), flex-basis .15s var(--ease);
  gap: 10px;
  overflow: hidden;
}
.col--folded:hover { background: #dae2ea; }

.col--folded.col--won  { border-top-color: var(--ok); }
.col--folded.col--lost { border-top-color: var(--bad); }

.col--won .col__title  { color: var(--ok); }
.col--lost .col__title { color: var(--bad); }
.col--lost .col__head  { border-top-color: var(--bad); }

.col__fold-count {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.col--folded.col--won  .col__fold-count { color: var(--ok); }
.col--folded.col--lost .col__fold-count { color: var(--bad); }

/* Rotated rather than wrapped: a 56px column cannot hold "Negotiation"
   horizontally, and one letter per line is unreadable. */
.col__fold-name {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 190px;
  color: var(--ink-soft);
}
[dir="rtl"] .col__fold-name { writing-mode: vertical-lr; }

.col__fold-total {
  writing-mode: vertical-rl;
  font-size: 10.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-height: 150px;
  overflow: hidden;
}
[dir="rtl"] .col__fold-total { writing-mode: vertical-lr; }

.col__fold-hint { margin-top: auto; color: var(--ink-faint); }
[dir="rtl"] .col__fold-hint svg { transform: scaleX(-1); }

.col--folded.col--over {
  flex-basis: 76px;
  background: var(--cyan-tint);
  border-color: var(--cyan);
}

/* The control that folds an open column again. */
.col__fold {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-inline-start: auto;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  flex: none;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.col__fold:hover { background: rgba(2, 30, 55, .1); color: var(--ink); }

/* The header is a double-click target, so its text should not select on the
   first click of the pair. */
.col__head { user-select: none; }

@media (pointer: coarse) {
  .col--folded { flex-basis: 64px; }
  .col__fold { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------------------------
   Settings hub
   ---------------------------------------------------------------------------
   The settings screen is a hub of sections rather than one long page. These
   are the buttons on the hub and the header of a section.

   Colours come from the variables only. --cyan is 2.84:1 on white and cannot
   carry text, so it is used for the icon tile's background with --cyan-deep
   (5.45:1) as the ink on top of it, and never the other way round.
   --------------------------------------------------------------------------- */

.set-hub__group { font-size: 15px; margin: 0 0 2px; }
.set-hub__grouphint { margin: 0 0 12px; }

.set-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
}

.set-hub__card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: start;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.set-hub__card:hover { border-color: var(--cyan-deep); background: var(--cyan-pale); }
.set-hub__card:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 2px; }

.set-hub__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  background: var(--cyan-tint);
  color: var(--cyan-deep);
}

.set-hub__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.set-hub__title { font-weight: 600; font-size: 13.5px; }
.set-hub__hint  { font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }
.set-hub__go    { flex: none; color: var(--ink-faint); }

/* The chevron points the way the reader is going, so it mirrors in Arabic. */
[dir="rtl"] .set-hub__go svg { transform: scaleX(-1); }

.set-page__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.set-page__head h1 { margin: 0; }

/* Back points against the reading direction, so this one mirrors the other way. */
.set-page__back svg { transform: scaleX(-1); }
[dir="rtl"] .set-page__back svg { transform: none; }

/* A touch target has to be reachable with a thumb, and a tablet in landscape
   is as wide as a laptop — so this keys off the pointer, not the width. */
@media (pointer: coarse) {
  .set-hub__card { padding: 16px; min-height: 60px; }
}

/* A tappable row in the users and teams lists. It is a <button> because it
   does something, which also gets keyboard focus and Enter for free. */
.userrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  font: inherit;
  color: var(--ink);
  text-align: start;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.userrow:hover { background: var(--cyan-pale); }
.userrow:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: -2px; }

.userrow__chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

@media (pointer: coarse) {
  .userrow { padding: 12px 8px; }
}

/* The count under a list, and the button that widens it. Quiet by design:
   it is a statement of fact, not a call to action. */
.listfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px 4px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.listfoot__count { flex: 1; }

/* A permission toggle in the role dialog. */
.perm {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.perm:last-of-type { border-bottom: 0; }
.perm input:disabled + span { color: var(--ink-faint); }

/* One line of the audit trail. */
.auditrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

/* WhatsApp is a button, not a plain link — opening a chat is an action worth
   recording, and it should look like one. */
.wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cyan-deep);
  font-weight: 500;
}

/* One attached file. */
.filerow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

/* A group of suspected duplicates, and one candidate within it. */
.dupgroup {
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.duprow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.duprow:last-of-type { border-bottom: 0; }

/* The bubble a team-chat message sits in.
   The markup has always asked for this class and the stylesheet never had it,
   so messages rendered as bare text against the page with no bubble at all. */
.channel__bubble {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.channel__msg--mine .channel__bubble {
  background: var(--cyan-tint);
  border-color: var(--cyan-pale);
}

/* The rail toggle, in the brand row.
   Mouse only: on a touch device the sidebar is the off-canvas drawer and
   collapsing it to a rail would be collapsing something already hidden. */
.rail-toggle {
  flex: none;
  margin-inline-start: auto;
  color: #8fb3c9;
}
.rail-toggle:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* Points the way the panel will move, and mirrors in Arabic. */
.shell--rail .rail-toggle svg { transform: scaleX(-1); }
[dir="rtl"] .rail-toggle svg { transform: scaleX(-1); }
[dir="rtl"] .shell--rail .rail-toggle svg { transform: none; }

@media (max-width: 1023px) { .rail-toggle { display: none; } }

/* Stacked on the rail. A 24px logo and a 38px button side by side need 62px
   in a 60px column, so they go one above the other instead of being squeezed
   until neither is tappable. */
.shell--rail .side__brand { flex-direction: column; gap: 6px; }
.shell--rail .rail-toggle { margin-inline-start: 0; }