/* ==============================================================
   Ops suite design system — self-contained shell, loaded after
   the legacy theme and deliberately overriding it inside .ops-body.
   Palette: ink #16243a · slate #44546a · accent #14b8a6 (teal-500)
   ============================================================== */

:root {
  --ops-ink: #16243a;
  --ops-slate: #44546a;
  --ops-muted: #8494a9;
  --ops-line: #e7ecf2;
  --ops-bg: #f4f6f9;
  --ops-accent: #14b8a6;
  --ops-accent-dark: #0f9f90;
  --ops-sidebar: #16243a;
  /* docked-chat column. Fluid so the dock still fits a ~950px laptop viewport (a 1200px
     window at 125% OS scaling) instead of eating half the page — see the dock block below. */
  --ops-chat-w: clamp(300px, 24vw, 340px);
  --ops-row-h: 50px;       /* height of one nav row — the design constant */
  --ops-topbar-h: 50px;    /* the bar's RENDERED height — JS in the shells re-syncs it when the nav wraps */
}

/* font + base ---------------------------------------------------- */
.ops-body, .ops-body * { font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important; }
.ops-body .mdi, .ops-body .mdi:before { font-family: 'Material Design Icons' !important; }
.ops-body .fa, .ops-body .fas, .ops-body .far, .ops-body [class^="fa-"]:not(.fab):not(.fa-brands) { font-family: 'Font Awesome 6 Free' !important; }
.ops-body .fab, .ops-body .fa-brands { font-family: 'Font Awesome 6 Brands' !important; }
.ops-body { background: var(--ops-bg); color: var(--ops-slate); font-size: 14px; margin: 0; }
.ops-body a { text-decoration: none !important; }

/* shell ---------------------------------------------------------- */
.ops-main { min-width: 0; }

/* top bar --------------------------------------------------------- */
.ops-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  min-height: var(--ops-row-h);   /* auto height: the nav may wrap to a second 50px row when space runs out */
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--ops-line);
  box-shadow: 0 2px 10px rgba(22, 36, 58, .06);
  container: opsbar / inline-size;   /* nav compression tiers key off the BAR's width, not the viewport (chat dock steals 330px) */
}
.ops-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ops-brand img { height: 32px; width: auto; display: block; }
.ops-brand-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .14em; color: #7ee0d6;
  border: 1px solid rgba(126, 224, 214, .4); border-radius: 4px; padding: 2px 5px; margin-left: 2px;
}
/* dev environment -------------------------------------------------- */
/* USE_DEV_DB=1 (./tunnel.sh dev). An amber bar and a DEV stamp beside the logo, so a window
   pointed at the dev cluster cannot be mistaken for prod. A wash and a heavy bottom rule rather
   than a dark fill: .ops-nav below sets its colour with !important, so the links stay legible
   whatever this does to the background. */
.dev-env .ops-topbar { background: #fff7ed; border-bottom: 3px solid #f59e0b; }
.ops-brand-tag.dev-tag {
  color: #b45309; border-color: rgba(180, 83, 9, .45); background: rgba(245, 158, 11, .14);
}

.ops-top-nav {
  display: flex;
  align-items: center;
  justify-content: center;   /* centre the links within the bar */
  flex-wrap: wrap;           /* last resort on narrow windows: flow onto a second 50px row */
  gap: 0 4px;
  flex: 1;
  min-width: 0;
  overflow: visible;   /* let the grouped dropdown menus open below the bar without being clipped */
}
.ops-top-nav > .dropdown { height: var(--ops-row-h); display: flex; align-items: center; }
/* margin-left:auto pushes the separator + the Data/Diagnostics/Admin group to the right edge of the nav */
.ops-nav-sep { width: 1px; height: 22px; background: rgba(22, 36, 58, .12); margin: 0 8px 0 auto; flex-shrink: 0; }
.ops-nav {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--ops-slate) !important; font-size: 15px; font-weight: 600;
  padding: 0 16px; height: var(--ops-row-h);
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;   /* keeps the label vertically centred */
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
/* the ops shell's 9 groups outgrow a laptop window (worse with the chat docked): compress
   before wrapping — tighter type, then no icons, then a single centred cluster. The client
   V2 bar shares these classes but has few items, so only bars marked .ops-dense compress. */
@container opsbar (max-width: 1620px) {
  .ops-dense .ops-nav { font-size: 14px; padding: 0 11px; gap: 5px; }
  .ops-dense .ops-nav i { font-size: 17px; }
  .ops-dense .ops-nav-sep { margin: 0 6px; }   /* give up the right-pinned system group; centre everything */
}
@container opsbar (max-width: 1470px) {
  .ops-dense .ops-nav { font-size: 13.5px; padding: 0 9px; }
  .ops-dense .ops-nav i { display: none; }
}
@container opsbar (max-width: 1250px) {
  .ops-dense .ops-user-name { display: none; }   /* the initials avatar still identifies the account */
}
@container opsbar (max-width: 1130px) {
  /* too narrow for one row even compressed: turn the separator into a row break so the
     business group and the Data/Diagnostics/Admin group land on their own centred rows */
  .ops-dense .ops-nav-sep { flex-basis: 100%; height: 0; margin: 0; }
}
.ops-nav.dropdown-toggle::after { margin-left: 1px; color: var(--ops-muted); vertical-align: middle; }
.ops-nav i { font-size: 18px; color: var(--ops-muted); transition: color .12s ease; }
/* keep the grouped dropdown menus above page content / chat dock / modals */
.ops-topbar .dropdown-menu { z-index: 1051; }
/* nested dropdowns: bootstrap 4 has none, so a submenu is a plain .dropdown-menu flown out of an
   .ops-subnav row. Opens on hover; the click handler in ops/base.html toggles .show for touch and
   keyboard, and flips .ops-sub-left when the flyout would run off the right edge. */
.ops-topbar .ops-subnav { position: relative; }
.ops-topbar .ops-subtoggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.ops-topbar .ops-subtoggle i { font-size: 17px; color: var(--ops-muted); margin-left: 12px; }
.ops-topbar .ops-subtoggle.active { font-weight: 600; color: var(--ops-ink); }
.ops-topbar .ops-submenu { position: absolute; top: -8px; left: 100%; margin: 0; min-width: 210px; }
.ops-topbar .ops-subnav:hover > .ops-submenu,
.ops-topbar .ops-submenu.show { display: block; }
.ops-topbar .ops-sub-left > .ops-submenu { left: auto; right: 100%; }
.ops-topbar .ops-sub-left > .ops-subtoggle i { transform: scaleX(-1); }   /* chevron points the way the flyout opens */
.ops-nav:hover { color: var(--ops-ink) !important; background: rgba(22, 36, 58, .05); }
.ops-nav:hover i { color: var(--ops-ink); }
.ops-nav.active { color: var(--ops-ink) !important; font-weight: 600; border-bottom-color: var(--ops-ink); }
.ops-nav.active i { color: var(--ops-ink); }
.ops-top-user { flex-shrink: 0; }
.ops-user-toggle { display: flex; align-items: center; gap: 10px; }
.ops-user-name { color: var(--ops-slate); font-size: 13px; font-weight: 600; }
.ops-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #bf93ac 0%, #3AB3AF 35%, #607394 70%, #bf93ac 100%);  /* everhaze brand: pink both ends, green core, thin indigo */
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ops-top-user .dropdown-menu { border: 1px solid var(--ops-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(22, 36, 58, .16); font-size: 13.5px; }
@media (max-width: 1250px) { .ops-user-name { display: none; } }

/* initials chip shown wherever an entity has no image (mirrors .ops-avatar); sized by the
   same evlogo-w-* classes the photo would have used, kept square via aspect-ratio. Each
   entity type gets its own base colour so users/clients/reporters/outlets are tellable apart. */
.ev-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; box-sizing: border-box;
  background: linear-gradient(135deg, #bf93ac 0%, #3AB3AF 35%, #607394 70%, #bf93ac 100%);  /* default = user */
  color: #fff; font-weight: 700; line-height: 1; text-transform: uppercase; vertical-align: middle;
}
/* each type is a blend (like the topbar avatar), dominated by its own hue so they're tellable apart */
.ev-avatar-user     { background: linear-gradient(135deg, #bf93ac 0%, #3AB3AF 35%, #607394 70%, #bf93ac 100%); }  /* everhaze brand */
.ev-avatar-client   { background: linear-gradient(135deg, #8fa1bd 0%, #607394 50%, #46566f 100%); }              /* indigo blend */
.ev-avatar-reporter { background: linear-gradient(135deg, #5fe6c0 0%, #20d6a0 50%, #129b86 100%); }              /* reporter green blend (badge-reporter) */
.ev-avatar-outlet   { background: linear-gradient(135deg, #fcd98a 0%, #f9c961 50%, #e8932f 100%); }              /* outlet gold blend (badge-outlet) */
/* a real image fills a fixed media cell (e.g. outlet card thumbnails); the placeholder chip stays a circle */
.ev-avatar-fill { width: 100% !important; height: 100% !important; aspect-ratio: auto; border-radius: 0; font-size: 30px; }
/* large round placeholder for the 200px contributor/outlet profile image */
.ev-avatar-contrib { width: 200px; font-size: 72px; }
/* keep the real profile image identical once the ev_avatar helper adds the .evlogo base */
.evlogo.evlogo-contrib-profile { border-radius: 15px; max-width: 200px; max-height: 200px; }
.ev-avatar.evlogo-w-25 { font-size: 10px; }
.ev-avatar.evlogo-w-30 { font-size: 12px; }
.ev-avatar.evlogo-w-40 { font-size: 15px; }
.ev-avatar.evlogo-w-50 { font-size: 18px; }
.ev-avatar.evlogo-w-60 { font-size: 22px; }
.ev-avatar.evlogo-w-80 { font-size: 30px; }
.ev-avatar.evlogo-w-100 { font-size: 38px; }
/* keep the initials chip a perfect circle on any v2 page: in a flex cell, img-fluid's
   height:auto + the cell's stretch turn the chip into an oval (aspect-ratio alone loses
   to the stretch). Pin a definite square height per size + stop the flex item stretching.
   The .cm-v2 .ev-row rule only covers campaign-manager rows; this also covers standalone
   pages (e.g. the coverage-book manager). Chip-only — real photos (.evlogo) are untouched. */
.ev-avatar { flex: 0 0 auto; }
.ev-avatar.evlogo-w-20  { height: 20px; }
.ev-avatar.evlogo-w-25  { height: 25px; }
.ev-avatar.evlogo-w-30  { height: 30px; }
.ev-avatar.evlogo-w-40  { height: 40px; }
.ev-avatar.evlogo-w-50  { height: 50px; }
.ev-avatar.evlogo-w-60  { height: 60px; }
.ev-avatar.evlogo-w-80  { height: 80px; }
.ev-avatar.evlogo-w-100 { height: 100px; }

/* one identical initials chip in every v2 table row — matches the content-manager
   owner chip (44px circle, 22px letters). The per-size .evlogo-w-* rules above vary
   the chip per call site (w-40…w-100 → 15px…38px letters, different box heights) and,
   in a stretchy flex cell, leave ovals. Inside a table row (.ev-row) the chip is always
   a person/entity avatar, so pin one canonical circle + letter size regardless of which
   size class the JS passed. Beats both the per-size rules and the .cm-v2 .ev-row override
   (same 44px box). Chip-only — real photos (.evlogo) are untouched.
   w-25 is intentionally excluded: it's the compact outlet/reporter logo tucked into an
   add-coverage badge, not a row avatar — 44px would burst that badge. */
.ev-row .ev-avatar.evlogo-w-40,
.ev-row .ev-avatar.evlogo-w-50,
.ev-row .ev-avatar.evlogo-w-60,
.ev-row .ev-avatar.evlogo-w-80,
.ev-row .ev-avatar.evlogo-w-100 {
  width: 44px !important; height: 44px !important; min-width: 44px;
  aspect-ratio: 1 / 1; border-radius: 50% !important;
  font-size: 22px !important;
}

/* page ------------------------------------------------------------ */
.ops-page { padding: 28px 32px 64px; max-width: 1380px; margin: 0 auto; }
.ops-page-wide { max-width: none; }
.ops-page h4.card-title { font-weight: 800; color: var(--ops-ink); font-size: 19px; letter-spacing: -.01em; }
.ops-page h5.card-title { font-weight: 700; color: var(--ops-ink); font-size: 15px; letter-spacing: -.01em; }
.ops-page .text-muted { color: var(--ops-muted) !important; }
.ops-page a:not(.btn) { color: var(--ops-ink); font-weight: 500; }
.ops-page a:not(.btn):hover { color: var(--ops-accent); }

/* cards ------------------------------------------------------------ */
.ops-page .card {
  border: 1px solid var(--ops-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(22, 36, 58, .04);
  margin-bottom: 20px;
  background: #fff;
}
.ops-page .card-body { padding: 20px 22px; }

/* tables ------------------------------------------------------------ */
.ops-page table { width: 100%; border-collapse: collapse; }
.ops-page thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ops-muted); font-weight: 700; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--ops-line);
}
.ops-page tbody td { padding: 11px 10px; border-bottom: 1px solid #f1f4f8; vertical-align: middle; font-size: 13.5px; }
.ops-page tbody tr:last-child td { border-bottom: none; }
.ops-page tbody tr:hover { background: #f8fafc; }

/* badges — soft pills (inline color styles were stripped) ------------ */
.ops-page .badge, .ops-body .modal .badge {
  font-weight: 600; font-size: 11px; padding: .35em .7em; border-radius: 20px;
  letter-spacing: .01em; color: #fff;
}
.ops-page .badge-secondary, .ops-body .modal .badge-secondary { background: #edf1f6 !important; color: #5a6a80 !important; }
.ops-page .badge-info, .ops-body .modal .badge-info { background: #e7f0fb !important; color: #2f6fb8 !important; }
.ops-page .badge-success, .ops-body .modal .badge-success { background: #e2f6ed !important; color: #178a5a !important; }
.ops-page .badge-warning, .ops-body .modal .badge-warning { background: #fdf2dd !important; color: #b97a14 !important; }
.ops-page .badge-danger, .ops-body .modal .badge-danger { background: #fde9e8 !important; color: #cc3b34 !important; }

/* buttons ------------------------------------------------------------ */
.ops-body .btn { border-radius: 8px; font-weight: 600; font-size: 13.5px; padding: .45rem 1rem; }
.ops-body .btn-sm { font-size: 12.5px; padding: .3rem .7rem; }
.ops-body .btn-primary {
  background: var(--ops-accent) !important; border-color: var(--ops-accent) !important; color: #fff !important;
  box-shadow: 0 1px 2px rgba(20, 184, 166, .35);
}
.ops-body .btn-primary:hover { background: var(--ops-accent-dark) !important; border-color: var(--ops-accent-dark) !important; }
.ops-body .btn-secondary, .ops-body a.btn-secondary {
  background: #fff !important; border: 1px solid #d7dfe9 !important; color: var(--ops-slate) !important;
}
.ops-body .btn-secondary:hover, .ops-body a.btn-secondary:hover { background: #f2f5f9 !important; color: var(--ops-ink) !important; }
.ops-body .btn-success { background: #18a767 !important; border-color: #18a767 !important; color: #fff !important; }
.ops-body .btn-success:hover { background: #148f58 !important; border-color: #148f58 !important; }
.ops-body .btn-danger { background: #fff !important; border: 1px solid #f3c1be !important; color: #cc3b34 !important; }
.ops-body .btn-danger:hover { background: #fde9e8 !important; }
.ops-body .btn-warning { background: #fdf2dd !important; border-color: #f3ddb3 !important; color: #b97a14 !important; }

/* board tabs ----------------------------------------------------------- */
.ops-page .nav-pills .nav-link { color: var(--ops-muted); font-weight: 600; font-size: 13.5px; border-radius: 8px; padding: .4rem .9rem; }
.ops-page .nav-pills .nav-link:hover { color: var(--ops-ink); background: #edf1f6; }
.ops-page .nav-pills .nav-link.active { background: var(--ops-ink) !important; color: #fff !important; }

/* dashboard tiles -------------------------------------------------------- */
.ops-tile { transition: transform .14s ease, box-shadow .14s ease; }
.ops-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22, 36, 58, .1); }
.ops-tile .card-body { padding: 16px 18px !important; text-align: left !important; }
.ops-tile h3 { font-weight: 800; color: var(--ops-ink); margin-bottom: 1px; font-size: 28px; letter-spacing: -.02em; }
.ops-tile .ops-tile-label { color: var(--ops-slate); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.ops-tile .ops-tile-sub { color: var(--ops-muted); font-size: 12px; margin-top: 2px; }

/* kanban ------------------------------------------------------------------ */
/* one var owns the column width; pages that want slimmer columns set --ops-col-w */
.ops-col { width: var(--ops-col-w, 270px); min-width: var(--ops-col-w, 270px); flex-shrink: 0; }
.ops-col-card { background: #eef1f6 !important; border: none; border-radius: 12px; box-shadow: none !important; }   /* inline border-top keeps the stage colour */
.ops-col h6 { font-weight: 700; color: var(--ops-ink); padding: 4px 6px 0; font-size: 13px; }
.ops-col .col-count { background: #dde3ec !important; color: #5a6a80 !important; }
.ops-card {
  border: 1px solid #e9edf3;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(22, 36, 58, .05);
  transition: box-shadow .14s ease, transform .14s ease;
  margin-bottom: 10px !important;
}
.ops-card:hover { box-shadow: 0 6px 16px rgba(22, 36, 58, .12); transform: translateY(-1px); }
.ops-card .card-body { padding: 12px 14px !important; }
.ops-card a { color: var(--ops-ink); font-size: 13.5px; font-weight: 600; }
.ops-card a:hover { color: var(--ops-accent); }
.ops-card .badge { font-size: 10px; }
/* One card shape on every board, top to bottom: the badges that say what it IS, the title,
   the one-line row saying where it belongs, then what has happened to it and when. A row a
   board leaves empty collapses instead of paying for itself in blank space — which is why
   the template keeps each of them on a single line with no whitespace of its own. */
.ops-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ops-card-top:empty, .ops-card-meta:empty, .ops-card-sub:empty { display: none; }
/* a fixed number of lines and no more, so cards in a column stay close to the same height
   whatever they are called; the title attribute carries the whole of it for the hover. One
   var owns how many, the way --ops-col-w owns the column width — a board whose titles run
   long sets --ops-card-lines on its .ops-page. */
.ops-card-title { display: -webkit-box; -webkit-line-clamp: var(--ops-card-lines, 2);
                  -webkit-box-orient: vertical;
                  overflow: hidden; line-height: 1.32; word-break: break-word; }
.ops-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 11px; color: var(--ops-muted); }
.ops-card-meta > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-card-meta i { font-size: 12px; flex-shrink: 0; opacity: .75; }
.ops-card-sub { font-size: 12px; color: var(--ops-muted); margin-top: 2px; }
.ops-card-foot { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.ops-card-when { margin-left: auto; font-size: 11px; color: var(--ops-muted); flex-shrink: 0; }
/* the task board's department and priority badges — a click on either cycles the priority,
   so both have to read as a control and must not be swallowed by the drag */
.ops-card .ops-pri, .ops-card .ops-dept { cursor: pointer; user-select: none; box-shadow: inset 0 0 0 1px rgba(22, 36, 58, .18); }
.ops-card .ops-pri:hover, .ops-card .ops-dept:hover { filter: brightness(.94); box-shadow: inset 0 0 0 1px rgba(22, 36, 58, .35); }
.ops-ghost { opacity: .45; transform: rotate(1.5deg); }

/* modal -------------------------------------------------------------------- */
.ops-body #ev-modal .modal-content { border: none; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(22, 36, 58, .25); }
.ops-body #ev-modal .modal-header { background: #fff !important; border-bottom: 1px solid var(--ops-line); padding: 16px 22px; }
.ops-body #ev-modal .modal-header h1 { font-size: 17px; font-weight: 800; color: var(--ops-ink); margin: 0; }
.ops-body #ev-modal .modal-header .close { color: var(--ops-muted); opacity: 1; text-shadow: none; }
.ops-body #ev-modal .modal-body { padding: 20px 22px; }

/* forms ---------------------------------------------------------------------- */
.ops-body .form-control { border: 1px solid #d7dfe9; border-radius: 8px; color: var(--ops-ink); font-size: 13.5px; }
.ops-body .form-control:focus { border-color: var(--ops-accent); box-shadow: 0 0 0 3px rgba(20, 184, 166, .15); }
.ops-body label { font-size: 12px; font-weight: 600; color: var(--ops-slate); }

/* evModal forms — finish the legacy .form-horizontal.r-separator layout for v2:
   drop the logo watermark + the vertical label/field divider, give the rows a
   little air, and theme the select2 / radio / hr bits the bare .form-control
   rule above doesn't reach. One scoped block restyles every evform at once. */
.ops-body #ev-modal .scrollable { height: auto !important; max-height: 60vh; overflow-y: auto; overflow-x: hidden; }
.ops-body #ev-modal #form-shape { display: none; }                       /* faint logo watermark */
.ops-body #ev-modal .form-group.row { padding: 5px 0; }
.ops-body #ev-modal .border-left { border-left: 0 !important; }          /* the r-separator divider */
.ops-body #ev-modal .control-label,
.ops-body #ev-modal .col-form-label { color: var(--ops-slate); font-weight: 600; font-size: 12.5px; }
.ops-body #ev-modal .control-label .text-primary { color: var(--ops-muted) !important; }  /* help (?) glyphs */
.ops-body #ev-modal hr { border-top: 1px solid var(--ops-line); margin: 14px 0; }
.ops-body #ev-modal #form_message { font-size: 13px; }
.ops-body #ev-modal input[type=radio],
.ops-body #ev-modal input[type=checkbox] { accent-color: var(--ops-accent); width: 15px; height: 15px; vertical-align: middle; }
.ops-body #ev-modal .nobullet-radio-list label { margin-right: 16px; font-weight: 600; color: var(--ops-slate); cursor: pointer; }
/* select2 widgets inside modal forms → match the .form-control treatment */
.ops-body #ev-modal .select2-container { width: 100% !important; }
.ops-body #ev-modal .select2-container--default .select2-selection--single,
.ops-body #ev-modal .select2-container--default .select2-selection--multiple {
  border: 1px solid #d7dfe9 !important; border-radius: 8px !important; min-height: 38px; }
.ops-body #ev-modal .select2-container--default .select2-selection--single { height: 38px !important; }
.ops-body #ev-modal .select2-selection--single .select2-selection__rendered { line-height: 38px !important; color: var(--ops-ink) !important; }
.ops-body #ev-modal .select2-selection--single .select2-selection__arrow { height: 36px !important; }
.ops-body #ev-modal .select2-container--focus .select2-selection,
.ops-body #ev-modal .select2-container--open .select2-selection {
  border-color: var(--ops-accent) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, .15); }
.ops-body #ev-modal .select2-selection--multiple .select2-selection__choice {
  background: #eaf6f4 !important; border: 1px solid #cfe9e5 !important; color: #1a8a7f !important; border-radius: 6px; font-size: 12.5px; }
.ops-body #ev-modal .select2-selection--multiple .select2-selection__choice__remove { color: #1a8a7f !important; }

/* SweetAlert2 popups (v10) — themed for v2. Swal appends .swal2-container to
   <body> (outside any .ops-page/.cm-v2 wrapper), so like #ev-modal it's keyed off
   the body class .ops-body. The buttons already inherit the v2 .btn-* look
   (swal_settings sets buttonsStyling:false + customClass 'btn btn-primary/secondary'),
   so this only restyles the card / title / text / icon / input. */
.ops-body .swal2-popup {
  border-radius: 16px; padding: 26px 26px 22px; border: 1px solid var(--ops-line);
  box-shadow: 0 24px 60px rgba(22, 36, 58, .25); }
.ops-body .swal2-title { color: var(--ops-ink); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.ops-body .swal2-html-container,
.ops-body .swal2-content { color: var(--ops-slate); font-size: 14px; }
.ops-body .swal2-close { color: var(--ops-muted); }
.ops-body .swal2-close:hover { color: var(--ops-ink); }
.ops-body .swal2-actions { gap: 4px; margin-top: 8px; }
/* text/textarea/select inputs in a swal prompt → match the .form-control treatment */
.ops-body .swal2-input,
.ops-body .swal2-textarea,
.ops-body .swal2-select {
  border: 1px solid #d7dfe9; border-radius: 8px; color: var(--ops-ink); font-size: 13.5px; box-shadow: none; }
.ops-body .swal2-input:focus,
.ops-body .swal2-textarea:focus,
.ops-body .swal2-select:focus {
  border-color: var(--ops-accent); box-shadow: 0 0 0 3px rgba(20, 184, 166, .15); }
.ops-body .swal2-validation-message { background: transparent; color: #ce4a4a; font-weight: 600; }
/* icons: retint the brand-neutral ones (success/info/question) to the v2 accent;
   leave error red + warning amber as the meaningful status colours. */
.ops-body .swal2-icon.swal2-success { border-color: rgba(20, 184, 166, .3); color: var(--ops-accent); }
.ops-body .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(20, 184, 166, .3); }
.ops-body .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ops-accent); }
.ops-body .swal2-icon.swal2-info,
.ops-body .swal2-icon.swal2-question { border-color: rgba(96, 115, 148, .35); color: var(--ops-slate); }

/* lists (timeline, dashboard feeds) ------------------------------------------- */
.ops-page #activity-list a, .ops-page #renewals-list a, .ops-page #tasks-list a,
.ops-page #timeline a { color: var(--ops-ink); font-weight: 600; }
.ops-page #activity-list a:hover, .ops-page #renewals-list a:hover, .ops-page #tasks-list a:hover,
.ops-page #timeline a:hover { color: var(--ops-accent); }
.ops-page #timeline .border-bottom, .ops-page #activity-list .border-bottom { border-color: #f1f4f8 !important; }

/* email chain ------------------------------------------------------------------ */
.ops-page .ops-msg { border-radius: 10px; }
.ops-page .ops-msg .card-body { background: #fbfcfe; }

/* bot chat: the shared floating component docked LEFT, full height ----------------
   The gate was 1101px, which silently failed on a normal working window — 1192 device px at
   125% Windows scaling is 954 CSS px — so the dock and its auto-open both bailed out and the
   panel fell back to the bottom-right launcher. 900px keeps phones/tablets on the launcher
   while every real desktop window gets the docked panel.
   Keep this breakpoint in sync with the matchMedia() auto-open in layouts/app.html,
   ops/base.html and components/research_chat.html — the panel only loads its conversation
   on open, so a mismatch docks an empty column. */
@media (min-width: 900px) {
  .ops-has-chat #ev-fc-button,
  .ops-has-chat #ev-fc-launcher-dot,
  .ops-has-chat #ev-fc-close { display: none !important; }
  .ops-has-chat #ev-fc-panel {
    left: 0; right: auto;
    top: 0;                              /* full-height column beside the shifted topbar */
    height: 100vh;
    transform: none !important;          /* always visible — never slides away */
    width: var(--ops-chat-w); min-width: 0;
    box-shadow: none;
    border-right: 1px solid var(--ops-line);
    z-index: 1029;                       /* under the topbar's dropdowns */
  }
  /* content and (shifted) topbar sit right of the full-height docked panel */
  .ops-has-chat .ops-main { margin-left: var(--ops-chat-w); }
  /* the footer sits outside .ops-main — give it the same offset so the docked panel
     doesn't overlap it (it's already the right width, just needs to shift right) */
  .ops-has-chat .ev-v2-footer { margin-left: var(--ops-chat-w); }
}
/* below 900px the component keeps its stock behaviour: floating button + slide-over */

/* who's-off calendar ------------------------------------------------------------ */
.ops-page #leave-calendar td { padding: 3px 1px; height: 26px; border-bottom: 1px solid #f1f4f8; }
.ops-page #leave-calendar th { padding: 4px 2px; }
.ops-leave-fill { height: 18px; border-radius: 5px; }

/* searchlist token consumption --------------------------------------------------- */
.tok-controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.tok-control label { display: block; margin-bottom: 5px; }
.tok-control > .form-control { min-width: 240px; }
/* select2 hides the <select> and inserts its own container beside it, which does not carry
   .form-control — so the filter bar needs the same floor or the widget collapses to nothing */
.tok-control > .select2-container { min-width: 240px; }
.tok-control > .select2-container--default .select2-selection--single { height: 38px; border-color: #d7dfe9; border-radius: 9px; }
.tok-control > .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; color: var(--ops-ink); }
.tok-control > .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.tok-run { margin-left: auto; }
.tok-seg { display: inline-flex; border: 1px solid #d7dfe9; border-radius: 9px; overflow: hidden; background: #fff; }
.tok-seg button { border: none; background: #fff; color: var(--ops-slate); font-weight: 600; font-size: 13px; padding: .48rem .95rem; cursor: pointer; }
.tok-seg button + button { border-left: 1px solid #eef1f5; }
.tok-seg button:hover { background: #f2f5f9; color: var(--ops-ink); }
.tok-seg button.active { background: var(--ops-ink); color: #fff; }
.tok-range .form-control { min-width: 0; }

.tok-tile h3 { font-size: 23px; }
.tok-tile-cost h3 { color: var(--ops-accent-dark); }

/* the data table is wide — right-align the numeric columns, group the 3 channel rows */
.tok-table th.tok-num, .tok-table td.tok-num { text-align: right; white-space: nowrap; }
.tok-table td.tok-name { vertical-align: top; padding-top: 14px; }
.tok-sl { font-weight: 700; color: var(--ops-ink); font-size: 13.5px; }
.tok-slcost { color: var(--ops-accent-dark); font-weight: 700; font-size: 12px; margin-top: 2px; }
.ops-page .tok-table tr.tok-group-top td { border-top: 2px solid var(--ops-line); }
.tok-chip { display: inline-block; font-weight: 700; font-size: 11px; color: #fff !important; padding: .22em .62em; border-radius: 6px; letter-spacing: .02em; }
.tok-inv { color: #cc3b34; }
.tok-strong { font-weight: 700; color: var(--ops-ink); }
.tok-cost { font-weight: 700; color: var(--ops-accent-dark); }
.tok-foot { border-top: 1px solid #f1f4f8; padding-top: 10px; }

/* agency overview table — clickable rows + a grand-total footer */
.tok-ov-table tbody tr { cursor: pointer; }
.tok-ov-table tbody tr:hover { background: #eef7f6; }
.tok-ov-table tbody tr:hover .tok-sl { color: var(--ops-accent-dark); }
.ops-page .tok-ov-table tfoot td { border-top: 2px solid var(--ops-line); border-bottom: none;
  font-weight: 700; color: var(--ops-ink); padding: 11px 10px; }
.tok-ov-table tfoot td:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ops-muted); }

/* email accept/reject toggle (reporter + outlet validation dashboards).
   The legacy theme has no .btn-success and no styling for .btn.active, so a solid pair of
   buttons gave the click no visible effect — unselected is now an outline, selected is solid. */
.email-decision .btn {
  background: #fff; color: var(--ops-slate); border: 1px solid var(--ops-line);
  font-weight: 600; box-shadow: none;
}
.email-decision .btn:hover { background: #f2f5f9; color: var(--ops-ink); }
.email-decision .email-accept.active,
.email-decision .email-accept.active:hover {
  background: var(--ops-accent); border-color: var(--ops-accent); color: #fff;
}
.email-decision .email-reject.active,
.email-decision .email-reject.active:hover {
  background: #d9534f; border-color: #d9534f; color: #fff;
}