/* Font Awesome Pro Light */
@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url('fonts/fa-light-300.woff2') format('woff2');
}

.fal,
.fa-light {
  font-weight: 300;
  font-family: 'Font Awesome 6 Pro' !important;
  font-style: normal !important;
}

.fa-timer:before {
  content: "\e353";
}

.fa-archive:before {
  content: "\f187";
}

.fa-users:before {
  content: "\f500";
}

/* Variables */
:root {
  /* Base colors */
  --color-pink: #e63478;
  --color-aqua: #31c5f2;
  --color-blue: #3985ce;
  --color-green: #24b466;
  --color-purple: #9262d5;
  --color-orange: #f60;

  /* Tint colors (pale backgrounds) */
  --color-pink-tint: #fce8ef;
  --color-aqua-tint: #7ae7ff2d;
  --color-blue-tint: #99d2f354;
  --color-green-tint: #e5f4e8;
  --color-purple-tint: #f3edf7;
  --color-orange-tint: #fdf3e8;

  /* Accent (alias for pink) */
  --color-accent: var(--color-pink);

  /* Timer state gradients (shared by nav timer + board timer button) */
  --timer-running-gradient: linear-gradient(to bottom left, #ff6600, #ff0068);
  --timer-match-gradient: linear-gradient(to bottom left, var(--color-green), #9acd12);
}

/* Color utility classes */
/* Tag style: colored text on pale tint background */
.tag-pink { color: var(--color-pink); background: var(--color-pink-tint); }
.tag-aqua { color: var(--color-aqua); background: var(--color-aqua-tint); }
.tag-blue { color: var(--color-blue); background: var(--color-blue-tint); }
.tag-green { color: var(--color-green); background: var(--color-green-tint); }
.tag-gray { color: #888; background: #eee; }
.tag-purple { color: var(--color-purple); background: var(--color-purple-tint); }
.tag-orange { color: var(--color-orange); background: var(--color-orange-tint); }

/* Solid style: white text on solid color background */
.bg-pink { color: #fff; background: var(--color-pink); }
.bg-aqua { color: #fff; background: var(--color-aqua); }
.bg-blue { color: #fff; background: var(--color-blue); }
.bg-green { color: #fff; background: var(--color-green); }
.bg-purple { color: #fff; background: var(--color-purple); }
.bg-orange { color: #fff; background: var(--color-orange); }

/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

strong, b {
  font-weight: 600;
}

html {
  font-size: 14.5px;
}

/* Responsive base font for narrower laptop screens (admin's supported range is 1500-1650+). */
@media (max-width: 1649px) { html { font-size: 14px; } }
@media (max-width: 1589px) { html { font-size: 13.5px; } }
@media (max-width: 1529px) { html { font-size: 13px; } }

body {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1;
  line-height: 1.5;
  color: #333;
  /* Portal / global floor: 1280px minimum supported (13" laptop) minus a ~16px vertical
     scrollbar = 1264, so a 1280px screen gets no horizontal scrollbar. Below this the page
     scrolls horizontally rather than collapsing. */
  min-width: 1264px;
}

/* Admin (staff) screens have a higher floor of 1500px. Scoped via the admin-only sidebar
   marker so the client portal keeps the 1264 floor. */
body:has(.admin-sidebar) {
  min-width: 1500px;
}

/* Client portal has no fixed floor: rather than scroll horizontally below 1264px, the base
   font-size tracks the viewport (1vw) so the em-based layout scales down to fit. */
body:has(.portal-body-content) {
  min-width: 0;
}

@media (max-width: 1263px) {
  body:has(.portal-body-content) {
    font-size: 1vw;
  }
}

/* Layout */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 6.2em;
  height: 100vh;
  background: #29292f;
  overflow-y: auto;
  z-index: 10;
  scrollbar-width: thin;
}

.sidebar-logo {
  padding: 1.8em 0 0.5em 0;
  text-align: center;
}

.sidebar-logo img {
  width: 4em;
  height: 2.41em;
}

.nav-links {
  list-style: none;
  padding: 1em 0 0.5em;
}

.nav-links li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1em 0;
  color: #ccc;
  text-decoration: none;
  font-size: 0.875em;
  line-height: 1;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.nav-links li a i {
  font-size: 1.4em;
  margin-bottom: 0.3em;
  opacity: 0.6;
}

.nav-links li a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.nav-links li a.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

.nav-links li a.active i {
  color: var(--color-pink);
  opacity: 1;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}

.user-section {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1em;
  text-align: center;
}

.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  color: white;
  cursor: pointer;
  object-fit: cover;
}

.user-avatar:hover {
  background: rgba(255, 255, 255, 0.3);
}

img.user-avatar:hover {
  opacity: 0.85;
}

.nav-search-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  margin-bottom: 0.75em;
  font-size: 16px;
}

.nav-search-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Global search (Ctrl+K) */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 11vh;
  z-index: 1000;
}

.search-panel {
  width: 30em;
  max-width: 92vw;
  max-height: 78vh;
  background: #fff;
  border-radius: 0.9em;
  box-shadow: 0 1.2em 3em rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 1em;
  padding: 0 1em;
  background: #eef0f3;
  border-radius: 0.6em;
}

.search-input-icon {
  color: #99a;
  font-size: 1em;
}

.search-input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  outline: none;
  padding: 0.85em 0;
  font-size: 1.05em;
  color: #222;
}

.search-results {
  overflow-y: auto;
  padding: 0 1em 0.8em;
  scrollbar-width: thin;
}

.search-group {
  margin-bottom: 0.6em;
}

.search-group + .search-group {
  border-top: 1px solid #ddd;
  padding-top: 0.6em;
}

.search-group-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0.5em 0.4em 0.6em;
}

.search-group-head h3 {
  margin: 0;
}

.search-viewall {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 999px;
  padding: 0.25em 0.8em;
  font-size: 0.72em;
  color: #666;
  cursor: pointer;
}

.search-viewall:hover {
  background: #f3f4f6;
  color: #333;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.5em 0.5em;
  border-radius: 0.4em;
  cursor: pointer;
}

/* Project rows are <a> (right-click to open in a new tab) — strip the default link look. */
a.search-row {
  text-decoration: none;
  color: inherit;
}

/* Keyboard navigation (arrow keys) gives the focused row the same look as hover. */
.search-row:hover,
.search-row.is-active {
  background: #f5f6f9;
}

.search-logo {
  flex: 0 0 2.4em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.search-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.4;
}

.search-row-title {
  font-weight: 600;
  color: #222;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.search-row-sub {
  color: #999;
  font-size: 0.875em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-empty {
  padding: 1.5em 0.5em;
  text-align: center;
  color: #999;
}

.content {
  margin-left: 6.2em;
  min-height: 100vh;
  background: #F5F6F9;
  padding: 2.6em 3em 3em;
}

.sidebar-secondary {
  position: fixed;
  top: 0;
  left: 6.2em;
  width: 15.5em;
  height: 100vh;
  background: #E8EAED;
  padding: 2.5em 2em 2em;
  overflow-y: auto;
  scrollbar-width: thin;
  /* Above the filter-dropdown wrapper (z-index:100) so the dropdown button never overlaps the
     sidebar on horizontal scroll, while the open menu still clears the overlay (99). */
  z-index: 101;
}

.sidebar-secondary h2 {
  display: block;
  text-align: center;
  border: 0;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: #444;
  font-size: 1em;
  letter-spacing: 0.05em;
  margin-bottom: 2.4em;
}

.sidebar-secondary h2 span {
  display: inline-block;
  position: relative;
}

.sidebar-secondary h2 span:after {
  content: '';
  position: absolute;
  width: calc(100% - 1.4em);
  height: 0.05em;
  bottom: -0.4em;
  left: 0.7em;
  background: var(--color-accent);
  opacity: 0.7;
}

.secondary-nav {
  list-style: none;
}

.secondary-nav li {
  margin-bottom: 0.3em;
}

/* Centered round "+" add button below the sidebar nav items (new project) */
.secondary-nav li.secondary-nav-add {
  display: flex;
  justify-content: center;
  margin-top: 1.2em;
}

.secondary-nav li.secondary-nav-add a.btn-sidebar-add {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4em;
  height: 2.4em;
  padding: 0;
  border-radius: 50%;
  background: var(--color-aqua, #00b4c8);
  color: #fff;
  font-size: 1em;
  transition: filter 150ms;
}

.secondary-nav li.secondary-nav-add a.btn-sidebar-add:hover {
  filter: brightness(1.08);
}

.secondary-nav li a,
.secondary-nav li button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35em 0.9em;
  border-radius: 0.4em;
  color: #444;
  text-decoration: none;
  line-height: inherit;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  transition: background-color 100ms;
}

.secondary-nav li a:hover,
.secondary-nav li button:hover {
  color: #222;
}

.secondary-nav li a.active,
.secondary-nav li button.active {
  color: white;
  background-color: var(--color-accent);
  font-weight: 500;
}

.secondary-nav .count {
  color: #999;
  font-size: 0.9em;
}

.secondary-nav li a.active .count,
.secondary-nav li button.active .count {
  color: white;
}

.nested-nav li a.active .count,
.nested-nav li button.active .count {
  color: var(--color-pink);
}

.content.has-secondary-sidebar {
  margin-left: calc(6.2em + 15.5em);
}

/* Project layout with topbar */
.project-topbar {
  position: fixed;
  top: 0;
  left: 6.2em;
  right: 0;
  height: 7em;
  background: #fff;
  box-shadow: 0 0 0.4em rgba(0 0 0 / 15%);
  /* Above .sidebar-secondary (101) so the Send email modal -- which renders inside the
     topbar's SendEmailButton and is thus trapped in this stacking context -- can cover the
     sidebar. Stays below the root-level app modals (1000) which still overlay the topbar.
     The topbar and sidebar don't visually overlap (sidebar starts at top:7em). */
  z-index: 110;
  display: flex;
}

.project-topbar-logo {
  width: 15.5em;
  height: 100%;
  background: #F5F6F9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-topbar-logo img {
  max-width: 9em;
  max-height: 3.8em;
  mix-blend-mode: multiply;
}

.project-topbar-heading {
  flex: 1;
  padding: 1.2em 3em 0.8em 3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-status {
  display: flex;
  align-items: center;
  margin-top: 0.1em;
  line-height: 2;
}

.project-status .status-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #999;
}

.project-status.status-discovery .status-dot { background: var(--color-aqua); }
.project-status.status-brief .status-dot { background: var(--color-blue); }
.project-status.status-production .status-dot { background: var(--color-green); }
.project-status.status-completed .status-dot { background: var(--color-purple); }

.project-status-dropdown { position: relative; user-select: none; align-self: flex-start; }
.project-status-dropdown .project-status { cursor: pointer; display: inline-flex; }

.project-status-chevron { color: #999; font-size: 0.7em; margin-left: 0.5em; opacity: 0; transition: opacity 150ms, transform 200ms; }
.project-status:hover .project-status-chevron,
.project-status.active .project-status-chevron { opacity: 1; }
.project-status.active .project-status-chevron { transform: rotate(180deg); }

/* Read-only status (designers): visible but not interactive */
.project-status-dropdown .project-status.readonly { pointer-events: none; cursor: default; }
.board-status-btn.readonly { pointer-events: none; cursor: default; }

.project-status-dropdown .board-status-menu .status-dot.status-discovery { background: var(--color-aqua); }
.project-status-dropdown .board-status-menu .status-dot.status-brief { background: var(--color-blue); }
.project-status-dropdown .board-status-menu .status-dot.status-production { background: var(--color-green); }
.project-status-dropdown .board-status-menu .status-dot.status-completed { background: var(--color-purple); }

.project-sidebar-icons {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  padding: 1.5em 0;
}

/* Per-user "Dropbox synced" toggle under the project sidebar icons */
.project-sidebar-sync {
  margin-bottom: 0.8em;
}

.project-sidebar-sync-error {
  color: var(--color-pink);
  font-size: 0.75em;
  text-align: center;
  padding: 0 1em 0.5em;
}

.project-sidebar-icon {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  background: #fff9;
  text-decoration: none;
  transition: all 150ms;
}

.project-sidebar-icon .fa-dropbox { color: #0061FF; }

.project-sidebar-icon .fa-envelope { color: var(--color-aqua); }
.project-sidebar-icon:has(.fa-envelope):hover { background: #fff9; }

.project-sidebar-icon img { width: 1.1em; height: 1.1em; }

.project-sidebar-icon:hover {
  background: #fff;
}

.project-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding-right: 3em;
}

.btn-client-view {
  color: #fff;
  background: var(--color-blue);
  white-space: nowrap;
  text-decoration: none;
}

.btn-client-view i {
  margin-right: 0.4em;
}

.btn-send-email {
  color: #666;
  background: #e8e8e8;
  white-space: nowrap;
}

.btn-send-email:hover {
  background: #ddd;
}

.btn-send-email i {
  margin-right: 0.5em;
  color: #999;
}

.btn-archive-project {
  color: #fff;
  background: var(--color-aqua);
  white-space: nowrap;
}

.btn-archive-project:hover:not(:disabled) {
  filter: brightness(0.95);
}

.btn-archive-project:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-archive-project i {
  margin-right: 0.5em;
}

.send-email-wrap {
  position: relative;
}

.send-email-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

.send-email-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #fff;
  border-radius: 0.5em;
  border: 1px solid #e2e2e2;
  box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.2);
  min-width: 140px;
  padding: 0.5em 0;
  margin-top: 0.5em;
  font-size: 0.9em;
}

.send-email-item {
  display: block;
  width: 100%;
  padding: 0.4em 1.2em;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.send-email-item:hover {
  background: #f5f5f5;
}

/* Send Email Modal */
.send-email-recipients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  margin-bottom: 2em;
}

.send-email-group {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.send-email-group h4 {
  line-height: 1;
  margin-bottom: 0.6em !important;
}

.send-email-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  cursor: pointer;
  line-height: 1.2;
}

.send-email-checkbox input[type="checkbox"] {
  margin-top: 0.1em;
  accent-color: var(--color-blue);
}

.send-email-checkbox span {
  display: flex;
  flex-direction: column;
}

.send-email-name {
  font-size: 0.95em;
}

.send-email-email {
  font-size: 0.8em;
  color: #999;
}

.send-email-empty {
  font-size: 0.85em;
  color: #999;
}

.send-email-message {
  min-height: 160px;
  resize: vertical;
}

/* Override the recipient-row column layout so the label flows inline and wraps. */
.send-email-status-update span {
  display: inline;
  line-height: 1.4;
}

.send-email-status-update .tag-green,
.send-email-status-update .tag-pink,
.send-email-status-update .tag-purple {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  font-weight: 500;
}

.send-email-footer {
  display: flex;
  justify-content: space-between;
}

.btn-pink {
  background: var(--color-pink);
  color: #fff;
}

.btn-pink:hover {
  opacity: 0.9;
}

.btn-blue {
  background: var(--color-blue);
  color: #fff;
}

.btn-blue:hover {
  opacity: 0.9;
}

.project-topbar-heading h1 {
  font-weight: 400;
  outline: none;
  margin-bottom: 0;
}

.project-status-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-height: 2.25em;
}

.job-lozenge {
  display: inline-block;
  background: #f5f6f9;
  color: #555;
  padding: 0.2em 0.7em;
  border-radius: 1em;
  font-size: 0.8em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 0.2em;
}

/* Job number cell in the project list (wraps long codes tightly) */
.job-no {
  display: inline-block;
  font-size: 0.92em;
  line-height: 1.1;
}

a.job-lozenge:hover {
  background: #eceef3;
}

.project-topbar-heading h1 strong {
}

.project-topbar-heading h1 strong::after {
  content: ' / ';
  color: #ddd;
  margin: 0 0.1em;
  font-weight: normal;
}

/* Brand-name jobs dropdown in the project topbar. */
.brand-jobs-wrap { position: relative; display: inline-block; }
.brand-jobs-trigger {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}

.brand-jobs-overlay { position: fixed; inset: 0; z-index: 200; }
.brand-jobs-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 0.4em; z-index: 201;
  min-width: 24em; max-width: 32em;
  background: #fff; border-radius: 0.4em; box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.18);
  padding: 0.6em 0; font-weight: 400; font-size: 0.95rem;
}
.brand-jobs-heading {
  display: block; padding: 0.6em 1.1em 0.3em; font-size: 0.7em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: #999;
}
.brand-jobs-heading:not(:first-child) {
  margin-top: 0.6rem;
  border-top: 1px solid #ddd;
  padding-top: 0.9rem;
}
.brand-jobs-empty { display: block; padding: 0.8em 1.1em; color: #999; }
.brand-jobs-item { position: relative; display: block; }
.brand-jobs-label {
  display: block; padding: 0.4em 3em 0.4em 1.1em; color: #333; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-jobs-item:hover > .brand-jobs-label { background: #f5f6f9; }
.brand-jobs-arrow {
  position: absolute; right: 1em; top: 50%; transform: translateY(-50%);
  color: #bbb; font-size: 0.75em; pointer-events: none;
}
.brand-jobs-brand { font-weight: 600; }
.brand-jobs-sep { color: #ccc; margin: 0 0.15em; }
.brand-jobs-pname { color: #777; }

.brand-jobs-boards {
  display: none; position: absolute; top: 0; left: 100%; min-width: 12em;
  background: #fff; border-radius: 0.4em; box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.18);
  padding: 0.4em 0;
  max-height: 20em;
  overflow-y: auto;
  scrollbar-width: thin;
}
.brand-jobs-item:hover > .brand-jobs-boards { display: block; }
.brand-jobs-board {
  display: block; padding: 0.4em 1.1em; color: #333; text-decoration: none; white-space: nowrap;
}
.brand-jobs-board:hover { background: #f5f6f9; }

.name-suffix {
  font-size: 0.8em;
}

/* Gap between the brand name (plain or the jobs dropdown) and the project-id lozenge in the topbar. */
.project-topbar-heading .name-suffix { margin-left: 0.3em; }

.name-suffix.discovery { color: var(--color-aqua); }
.name-suffix.brief { color: var(--color-blue); }
.name-suffix.production { color: var(--color-green); }
.name-suffix.completed { color: var(--color-purple); }

/* Team-count suffix ("+N") on the project list Team column */
.team-suffix {
  color: #999;
  font-size: 0.875em;
}

/* Archived indicator next to the status lozenge in the project list */
.project-archive-icon {
  color: var(--color-aqua);
  margin-left: 0.5em;
}

.sidebar-secondary.has-topbar {
  top: 7em;
  height: calc(100vh - 7em);
}

.content.has-topbar {
  margin-top: 7em;
  min-height: calc(100vh - 7em);
}

/* Project summary boxes */
.project-boxes {
  display: flex;
  gap: 2.4em;
  align-items: stretch;
}

/* Create view: single details box, no right-hand box yet. Constrain width, left-align the
   Create button, and drop the brand/name separator slash from the "New Project" heading. */
.project-layout.new-project .project-boxes {
  max-width: 50em;
}

.project-layout.new-project .form-actions {
  justify-content: flex-start;
}

.project-layout.new-project .project-topbar-heading h1 strong::after {
  content: none;
}

.project-box {
  flex: 1;
}

.project-box:nth-child(2) {
  background: #fff;
  border-radius: 0.5em;
  padding: 2.4em;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e9e9e9;
}

.project-box .form-group-inline {
  margin-bottom: 0.6em;
}

.project-box .form-group-inline .form-label {
  border-bottom: none;
}

.project-box .form-group-inline .form-input,
.project-box .form-group-inline select {
  border-bottom: 1px solid #e9e9e9;
}

.project-box .form-input,
.project-box .form-textarea,
.project-box select {
  padding: 0.6em 0.9em;
  border-bottom: none;
  appearance: none;
}

.approvals-wrap {
  margin-bottom: 2em;
  row-gap: 0.3em;
  display: grid;
}

.approval-status {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #666;
}

.approval-status.approved {
  color: #333;
}

.approval-tick {
  color: var(--color-green);
}

.package-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1em;
}

.package-label,
.package-total {
  display: flex;
  flex-direction: column;
}

.package-total {
  text-align: right;
}

.package-label strong,
.package-total strong {
  font-size: 1.25em;
}

.label-muted {
  color: #666;
  font-size: 0.9em;
}

.line-items {
  border-top: 1px solid #ddd;
  padding-top: 1em;
}

.line-items-header {
  font-weight: 600;
}

.line-item {
  display: flex;
  justify-content: space-between;
}

.line-item:last-child {
  border-bottom: none;
}

.line-item-desc {
  color: #444;
}

.line-item-amount {
  color: #222;
  font-weight: 500;
}

/* Pin the notes + "Add company note" button to the bottom of the project box, whether or
   not any notes exist. */
.company-notes-section {
  margin-top: auto;
}

.company-notes {
  margin-top: 0;
}

.company-notes-actions {
  margin-top: 0.75em;
}

.add-company-note-btn {
  color: #555;
  background: #e8e8e8;
}

.add-company-note-btn:hover {
  background: #ddd;
}

.add-company-note-btn i {
  margin-right: 0.4em;
}

.company-note {
  position: relative;
  padding: 0.7em 1em 0.7em 3em;
  margin-bottom: 0.6em;
  background: #f5f6f9;
  border-radius: 0.4em;
  cursor: pointer;
  transition: background 0.15s;
}

.company-note:last-child {
  margin-bottom: 0;
}

.company-note:hover {
  background: #eceef3;
}

.company-note-icon {
  position: absolute;
  top: 0.8em;
  left: 1.1em;
  color: #f0d16f;
  font-size: 1.1em;
}

.company-note-title {
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-note-date {
  margin-top: 0.15em;
  font-size: 0.85em;
  color: #999;
}

.modal-title-stack {
  flex: 1;
  padding-right: 1em;
}

.modal-subhead {
  margin-top: 0.25em;
  font-size: 0.92em;
  color: #999;
  font-weight: 400;
}

.note-view-title {
  margin: 0 0 0.6em 0;
}

.note-view-text {
  color: #444;
  white-space: pre-line;
  margin: 0 0 0.8em 0;
}

.note-view-text:last-of-type {
  margin-bottom: 0;
}

h1 {
  margin: 0 0 1em 0;
  color: #222;
  outline: none;
  font-size: 2em;
  font-weight: 600;
  line-height: 1.1;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2em;
}

h2 {
  margin: 1.8rem 0 1.2rem 0;
  color: #222;
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.2;
}

h2:first-child {
  margin-top: 0;
}

/* Toolbar Row */
.toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar-count {
  margin-left: auto;
  color: #777;
  font-size: 0.92em;
  white-space: nowrap;
  border: 1px solid #bbb;
  padding: 0.15em 0.7em;
  border-radius: 2em;
  font-weight: 500;
}

.toolbar {
  display: inline-flex;
  gap: 0.6em;
  align-items: center;
  background: #EAECF0;
  padding: 0.6em;
  border-radius: 50px;
  margin-bottom: 2em;
}

.toolbar .toolbar-btn { border-radius: 2em; }

.search-box {
  position: relative;
}

.search-box i {
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-box input {
  padding: 0.4em 0.75em 0.4em 2.25em;
  border: 3px solid transparent;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.92rem;
  background: white;
  height: 2.4em;
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-green-tint);
}

.search-box:focus-within i {
  color: var(--color-green);
  opacity: 0.5;
}

.search-button {
  background: var(--color-pink);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5em 1.2em;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  height: 2.5rem;
}

.search-button:hover {
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.1);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.filter-group label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Selectable group header in a grouped filter dropdown (e.g. channel groups). */
.grouped-select-group {
  font-weight: 600;
}

.filter-group select {
  padding: 0.4em 0.75em;
  border: 3px solid transparent;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.92rem;
  background: white;
  cursor: pointer;
  height: 2.4em;
}

.filter-group select:focus {
  outline: none;
  border-color: var(--color-green-tint);
}

/* Custom period date range: visible From/To labels (overriding the screen-reader-only
   default) and date inputs styled to match the pill selects. */
.filter-group .filter-date-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  font-size: 0.92rem;
  color: #555;
}

.filter-group input[type="date"] {
  padding: 0.4em 0.75em;
  border: 3px solid transparent;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.92rem;
  background: white;
  height: 2.4em;
}

.filter-group input[type="date"]:focus {
  outline: none;
  border-color: var(--color-green-tint);
}

/* Data Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 0.4em;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  position: relative;
}

.data-table.refreshing {
  pointer-events: none;
}
.data-table.refreshing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-aqua, #00b8d9), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: basictable-refresh-bar 1.1s linear infinite;
  z-index: 1;
}
@keyframes basictable-refresh-bar {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

.data-table th,
.data-table td {
  text-align: left;
  border-bottom: 1px solid #eaebed;
}

/* Fixed layout: column widths are honoured exactly (set via <colgroup>) and
   content no longer changes them, so columns don't reflow when sorting.
   Overflowing text wraps within the fixed width rather than widening the cell. */
.data-table.fixed-layout {
  table-layout: fixed;
}

/* Force long unbroken content (e.g. a board with many rounds) to wrap within
   its fixed column width instead of overflowing. */
.data-table .break-word {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.data-table th {
  padding: 0.7rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-blue);
  background: #f5f6f9;
  border-bottom: 1px solid #ddd;
  cursor: default;
}

.data-table td {
  padding: 0.6em 1.2em;
}

.data-table.spaced td {
  padding: 0.9em 1.2em;
}

.rate-row .form-label {
  background: var(--color-blue-tint);
  color: var(--color-blue);
}

.rates-panel .form-group-inline .form-label {
  border-bottom: none;
}

.rates-panel .form-group-inline .form-input {
  border-bottom: 1px solid #e9e9e9;
}

.credit-type-card {
  padding: 1em 1.2em;
  background: white;
  border: none;
  border-radius: 0.5em;
  border-bottom: 3px solid #ddd;
  cursor: pointer;
  width: 16em;
}

.credit-type-card:hover {
  border-bottom-color: var(--color-pink);
}

.credit-type-breakdown {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: #666;
}

.credit-type-row {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  padding: 0.15em 0;
}

.credit-type-total {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  padding-top: 0.3em;
  margin-top: 0.3em;
  border-top: 1px solid #e2e2e2;
  font-weight: 600;
  color: #333;
}

.data-table.tight td {
  padding: 0.4em 1.2em;
}

.data-table.tight .tree-connector::before {
  top: -0.7em;
  height: 1.1em;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.data-table th.sortable:hover {
  background: #e8eaed;
}

.data-table th .sort-icon {
  margin-left: 0.4em;
  color: #ccc;
  font-size: 0.8em;
}

.data-table th.sorted {
  color: var(--color-accent);
}

.data-table th.sorted .sort-icon {
  color: var(--color-accent);
}

/* The brand / project-id / project-name cell. Scoped rather than global because .name-suffix also
   has a different, uncoloured meaning in the project topbar. .reassign-list is a list rather than a
   table but shows the same thing, so it shares the treatment. */
.data-table .name-with-sub,
.reassign-list .name-with-sub {
  font-weight: 600;
}

.data-table .name-suffix,
.reassign-list .name-suffix {
  font-size: 0.875em;
  font-weight: 600;
}

.data-table .name-suffix.aqua,   .reassign-list .name-suffix.aqua   { color: var(--color-aqua); }
.data-table .name-suffix.blue,   .reassign-list .name-suffix.blue   { color: var(--color-blue); }
.data-table .name-suffix.green,  .reassign-list .name-suffix.green  { color: var(--color-green); }
.data-table .name-suffix.purple, .reassign-list .name-suffix.purple { color: var(--color-purple); }
.data-table .name-suffix.gray,   .reassign-list .name-suffix.gray   { color: #999; }
.data-table .name-suffix.pink,   .reassign-list .name-suffix.pink   { color: var(--color-pink); }

.data-table .domain,
.reassign-list .domain {
  display: block;
  color: #999;
  font-size: 0.875em;
  line-height: 1.25;
}

.data-table tbody tr:hover {
  background: #f9f9fa;
}

.data-table.no-row-hover tbody tr:hover {
  background: transparent;
}

.data-table tr.row-clickable {
  cursor: pointer;
}

.data-table.no-row-hover tbody tr {
  cursor: default;
}

/* Row links - for right-click "open in new tab" support */
.data-table tr.has-link td {
  padding: 0;
}

.data-table tr.has-link td a {
  display: block;
  padding: 0.6em 1.2em;
  color: inherit;
  text-decoration: none;
}

.data-table.spaced tr.has-link td a {
  padding: 0.9em 1.2em;
}

.data-table tr.has-link td.text-right a {
  padding-right: 3rem;
}

/* Grouped table view */
.grouped-table .group-header-row td {
  font-weight: 600;
  color: #222;
  padding-top: 1.25em;
  padding-bottom: 0.5em;
}

.grouped-table .group-header-row:hover {
  background: transparent;
}

.grouped-table .group-header-row {
  cursor: default;
}

.group-name {
  font-size: 1em;
}

.group-sort-icon {
  color: var(--color-accent);
  font-size: 0.85em;
  cursor: pointer;
  margin-left: 0.5em;
}

.grouped-table .group-child-row:hover {
  background: #f9f9fa;
}

.tree-connector {
  display: inline-block;
  width: 1.4em;
  height: 1em;
  margin-left: 1em;
  margin-right: 0.5em;
  position: relative;
  vertical-align: middle;
}

.tree-connector::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.9em;
  width: 1.4em;
  height: 1.3em;
  border-left: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  border-bottom-left-radius: 0.35em;
}

/* Regions admin: three-level nesting (account > region > country) */

.regions-table .country-row .tree-connector {
  margin-left: 4em;
}

.regions-table .add-country-btn {
  margin-left: 1em;
  font-size: 0.8em;
  opacity: 0;
  transition: opacity 0.1s;
}

.regions-table .region-row:hover .add-country-btn {
  opacity: 1;
}

.prefix {
  font-weight: 600;
  padding: 0.2em 0;
  border-radius: 0.3em;
  /* font-family: monospace; */
  margin-right: 1em;
  font-size: 0.75em;
  width: 3em;
  display: inline-block;
  text-align: center;
}

/* Column alignment utilities */
.text-right,
.data-table th.text-right,
.data-table td.text-right {
  text-align: right;
  padding-right: 3rem;
}

.text-center,
.data-table th.text-center,
.data-table td.text-center {
  text-align: center;
}

/* Toggle */
.toggle {
  font-size: 1.4em;
  color: #ddd;
  cursor: pointer;
}

.toggle.on {
  color: #8cc696;
}

/* Utility Classes */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.me-2 { margin-right: 0.5rem; }
.text-muted { color: #6c757d; }

/* Pagination */
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.25rem;
}

.page-item {
  display: inline-block;
}

.page-link {
  display: block;
  padding: 0.375rem 0.75rem;
  color: var(--color-blue);
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

.page-link:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.page-item.active .page-link {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
}

.page-item.disabled .page-link {
  color: #6c757d;
  background: #fff;
  border-color: #dee2e6;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Form Styles */
.form-panel {
}

.form-group {
  margin-bottom: 1.5em;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-row {
  margin-bottom: 1.5em;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row .form-group {
  margin-bottom: 0;
}

.form-group-inline {
  display: flex;
  align-items: stretch;
  margin-bottom: 0.75em;
}

.form-group-inline:last-child {
  margin-bottom: 0;
}

/* Avatar overlaid at the start of a select (e.g. OLS contact on project summary) */
.form-group-inline.with-select-avatar {
  position: relative;
}
.form-group-inline.with-select-avatar .form-input {
  padding-left: 3.1em;
}
.select-avatar {
  position: absolute;
  width: 1.65em;
  height: 1.65em;
  top: 0.4em;
  left: 9.8em;
  border-radius: 50%;
  pointer-events: none;
}
.select-avatar.placeholder {
  background: #f5f6f9;
}

/* Toggle for the delegate field, sat at the right of the OLS contact label
   (the label is already a flex row, so auto margin pushes it right) */
.delegate-toggle {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.7;
}
.delegate-toggle:hover {
  opacity: 1;
}

.form-group-inline .form-label {
  flex: 0 0 10.5em;
  margin-bottom: 0;
  border-radius: 0.4em 0 0 0.4em;
  border-bottom: 3px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  padding: 0 1em;
  transition: background-color 0.15s, color 0.15s;
}

/* Wider label variant (e.g. rates / credit fields with longer names) */
.form-group-inline .form-label.label-wide {
  flex: 0 0 12em;
}

.form-group-inline:focus-within .form-label {
  background: var(--color-green-tint);
  color: var(--color-green);
}

.form-group-inline .form-input {
  flex: 1;
  border-radius: 0 0.4em 0.4em 0;
  height: auto;
}

/* Selects keep a stable control height even before options load */
.form-group-inline select.form-input {
  min-height: 2.4em;
}

.form-group-inline:last-child {
  margin-bottom: 0;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5em;
}

.form-grid-70-30 {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 0 1.5em;
}

.form-grid-60-40 {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 0 1.5em;
}

.form-grid-2 .form-group:nth-last-child(-n+2),
.form-grid-70-30 .form-group:nth-last-child(-n+2),
.form-grid-60-40 .form-group:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.form-label {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.85em;
  font-weight: 500;
  border-radius: 0.4em 0.4em 0 0;
}

.form-heading {
  font-size: 1.1em;
  font-weight: 600;
  color: #333;
  margin: 2em 0 0.75em;
}

.form-group:first-child .form-heading {
  margin-top: 0;
}

.form-heading:first-child {
  margin-top: 0;
}

.form-input.input-rounded {
  border-radius: 0.4em;
}

.form-input,
.form-textarea {
  display: block;
  width: 100%;
  padding: 0.7em 0.9em;
  font-family: inherit;
  font-size: 1em;
  color: #333;
  background: white;
  border: none;
  border-bottom: 3px solid #ddd;
  border-radius: 0 0.4em 0.4em 0.4em;
}

/* Grow-to-content only for multiline textareas, not inputs/selects */
.form-textarea {
  field-sizing: content;
}

select.form-input,
input.form-input {
  height: calc(1.2em + 1.4em + 3px);
}

select.form-input {
  padding-left: 0.65em;
}

input:disabled {
  opacity: 0.5;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-bottom-color: var(--color-green-tint);
}

.form-group:focus-within .form-label {
  color: var(--color-green);
  background: var(--color-green-tint);
}

.form-group.has-error .form-label {
  color: var(--color-purple);
  background: var(--color-purple-tint);
}

.form-group.has-error .form-input,
.form-group.has-error .form-textarea {
  border-bottom-color: var(--color-purple-tint);
}

/* Required field left empty on a save attempt — the pink mirror of the green focus state. */
.form-group.field-invalid .form-label {
  color: var(--color-pink);
  background: var(--color-pink-tint);
}

.form-group.field-invalid .form-input,
.form-group.field-invalid .form-textarea {
  border-bottom-color: var(--color-pink-tint);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #aaa;
}

.form-textarea {
  min-height: 4.5em;
  overflow: hidden;
  resize: none;
}

/* Field width variants */
.field-short {
  width: 10em;
}

.field-auto {
  width: auto;
}

/* Toggle Switch List */
.form-section-title {
  font-size: 1.1em;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.75em;
}

.switch-list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-bottom: 2em;
}

.switch-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  cursor: pointer;
}

.two-column-switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2em;
}

.switch-column {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-bottom: 2em;
}

.switch {
  position: relative;
  width: 2.5em;
  height: 1.5em;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 1em;
  transition: background 200ms;
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  left: 0.2em;
  bottom: 0.2em;
  background: white;
  border-radius: 50%;
  transition: transform 200ms;
}

.switch input:checked + .switch-slider {
  background: var(--color-green);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(1em);
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #333;
  font-size: 0.95em;
  user-select: none;
}

/* Lock on a switch whose value is fixed. Muted so it reads as a state, not part of the label.
   The flex gap above handles its spacing. */
.switch-label .switch-lock {
  color: #999;
  font-size: 0.85em;
}

.form-loading {
  color: #666;
  font-style: italic;
  padding: 0.5em 0;
  display: block;
}

/* Form Alerts */
.form-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 2.4em;
  font-weight: 500;
  color: white;
}

/* Page-level form alerts (not inside a modal) get a rounded, inset bar */
.form-alert-page {
  border-radius: 0.7em 0.7em 0 0;
  padding: 0.7em 1.2em;
  /* Bleeds out to the page edges, sitting flush at the top of the content area */
  margin: -3rem -3.5rem 2.2rem -3.5rem;
}

.form-alert-success {
  background: var(--color-green);
}

.form-alert-error {
  background: #695390;
}

/* Not an error — something the action will overwrite, shown before it is taken. */
.form-alert-warning {
  background: var(--color-orange);
}

/* Neither a success nor a failure — "here's what we did, check it" */
.form-alert-info {
  background: var(--color-green);
  align-items: flex-start;
}

.form-alert-icon {
  margin-right: 0.5em;
}

.form-alert-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  opacity: 0.8;
}

.form-alert-close:hover {
  opacity: 1;
}

.form-placeholder {
  color: #888;
  padding: 2em 0;
}

/* Time Off display */
.time-off-header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1.5em;
}

.year-nav {
  display: flex;
}

.year-nav button {
  background: #fff;
  border: 1px solid #ddd;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 1em;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.year-nav button:hover {
  background: #f5f5f5;
}

.year-nav-prev {
  border-radius: 4px 0 0 4px;
}

.year-nav-next {
  border-radius: 0 4px 4px 0;
  margin-left: -1px;
}

.time-off-year {
  font-size: 1.25em;
  font-weight: 600;
  margin-left: 0.5em;
}

.time-off-month h4 {
  font-size: 1em;
  font-weight: 600;
  margin: 1.25em 0 0.4em 0;
  color: #333;
}

.time-off-entry {
  display: flex;
  align-items: baseline;
  font-size: 0.9em;
  line-height: 1.7;
}

.time-off-day {
  width: 24px;
  color: #666;
}

.time-off-dayname {
  width: 100px;
  color: #666;
}

.time-off-type {
  color: #888;
}

/* Role selector */
.form-subheading {
  font-size: 1em;
  font-weight: 600;
  margin: 0 0 0.75em 0;
  color: #333;
}


/* Form Select (keeping for toolbar selects) */
.form-select {
  display: block;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  appearance: none;
}

.form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0 1.3em;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 2.4;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  border-radius: 1.2em;
  height: 2.4em;
}

.btn i { margin-right: 0.2em; }

.btn-primary {
  color: #fff;
  background-color: var(--color-accent);
}

.btn-primary:hover {
  background-color: #c92d68;
  border-color: #c92d68;
}

.btn-export {
  color: #fff;
  background-color: var(--color-green);
  border-radius: 2em;
  font-weight: 500;
}

.btn-secondary {
  color: #333;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  transition: box-shadow 200ms;
}

.btn-secondary:hover {
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.08);
}

/* Action buttons */
.action-buttons {
  display: flex;
  gap: 0.75em;
  margin-bottom: 2em;
}

.action-buttons .btn i {
  margin-right: 0.4em;
  font-size: 0.9em;
}

/* Table row clickable */
.data-table tbody tr {
  cursor: pointer;
}

/* ============================================
   KANBAN DASHBOARD STYLES
   ============================================ */

/* Dashboard Layout */
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 3em);
  padding: 1.5em 2em;
}

/* Tab Bar */
.dashboard-tabs {
  display: flex;
  gap: 0.25em;
  padding-bottom: 1em;
  border-bottom: 1px solid #eaebed;
  overflow-x: auto;
  flex-shrink: 0;
}

.dashboard-tab {
  padding: 0.6em 1.2em;
  background: #f5f5f5;
  border: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  color: #666;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.dashboard-tab:hover {
  background: #eaebed;
  color: #333;
}

.dashboard-tab.active {
  background: var(--color-blue);
  color: white;
}

.dashboard-tab-add {
  padding: 0.6em 0.8em;
  background: transparent;
  border: 1px dashed #ccc;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  color: #999;
  font-family: inherit;
}

.dashboard-tab-add:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* Filter Bar */
.dashboard-filters {
  display: flex;
  gap: 1em;
  padding: 1em 0;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.dashboard-filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
}

.dashboard-filters .filter-group {
  position: relative;
  z-index: 95;
}

.dashboard-filters .dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #fff;
  border-radius: 0.5em;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 0.5em 0;
  flex-shrink: 0;
}

.filter-dropdown {
  position: relative;
}

.filter-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
}

.filter-dropdown-btn:hover {
  border-color: var(--color-blue);
}

.filter-dropdown-btn.has-selection {
  background: #e8f4f8;
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.4em;
  background: var(--color-blue);
  color: white;
  border-radius: 10px;
  font-size: 0.75em;
  font-weight: 500;
}

.filter-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 220px;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-top: 0.25em;
}

.filter-dropdown-menu.hidden {
  display: none;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.15em 1em;
  cursor: pointer;
}

.filter-option:hover {
  background: #f5f5f5;
}

.filter-option input[type="checkbox"] {
  width: 1em;
  height: 1em;
}

/* Sort & Density Toggles */
.dashboard-view-options {
  display: flex;
  gap: 0.5em;
  margin-left: auto;
}

.view-toggle {
  padding: 0.4em 0.8em;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  font-family: inherit;
}

.view-toggle.active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: white;
}

/* Kanban Board Container */
.kanban-board {
  display: flex;
  gap: 0;
  padding: 1.5em 3.5em 0 2.5em;
}

/* Individual Column */
.kanban-column {
  flex: 1 1 0;
  min-width: 0;
  max-height: calc(-8em + 100vh);
  display: flex;
  flex-direction: column;
}

.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  border-bottom: 2px solid #e0e0e0;
  flex-shrink: 0;
}

.kanban-column.col-aqua .job-number { color: var(--color-aqua); }
.kanban-column.col-blue .job-number { color: var(--color-blue); }
.kanban-column.col-purple .job-number { color: var(--color-purple); }
.kanban-column.col-green .job-number { color: var(--color-green); }
.kanban-column.col-pink .job-number { color: var(--color-pink); }

.kanban-column-title {
  font-weight: 600;
  color: #333;
  font-size: 0.95em;
}

.kanban-column-count {
  background: #e0e0e0;
  color: #666;
  padding: 0.15em 0.6em;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

.kanban-column-cards {
  flex: 1;
  overflow-y: auto;
  padding: 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

/* Card Styles */
.kanban-card {
  background: white;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
  border-left: 4px solid transparent;
}

.kanban-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.kanban-card.overdue {
  border-left-color: #dc3545;
}

.kanban-card.due-today {
  border-left-color: #ffc107;
}

.kanban-card.due-soon {
  border-left-color: #17a2b8;
}

.kanban-card.updated {
  animation: card-pulse 0.5s ease;
}

@keyframes card-pulse {
  0%, 100% { background: white; }
  50% { background: #e8f4f8; }
}

/* Compact card variant */
.kanban-card.compact {
  padding: 0.6em 0.8em;
}

.kanban-card.compact .card-brand {
  font-size: 0.7em;
}

.kanban-card.compact .card-title {
  font-size: 0.85em;
}

.kanban-card.compact .card-meta {
  display: none;
}

.kanban-card.compact .card-footer {
  margin-top: 0.5em;
  padding-top: 0.5em;
}

/* Card Header */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5em;
}

.card-brand {
  font-size: 0.75em;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.card-due-date {
  font-size: 0.75em;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  background: #f0f0f0;
  color: #666;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.card-due-date:hover {
  background: #e0e0e0;
}

.card-due-date.overdue {
  background: #ffeef0;
  color: #dc3545;
}

.card-due-date.today {
  background: #fff8e6;
  color: #856404;
}

/* Card Body */
.card-title {
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.card-subtitle {
  font-size: 0.85em;
  color: #888;
  margin-bottom: 0.5em;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8em;
  color: #999;
}

.card-job-number {
  font-family: monospace;
  font-size: 0.75em;
  color: #999;
}

/* Card Footer */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75em;
  padding-top: 0.75em;
  border-top: 1px solid #f0f0f0;
}

/* Avatar Styles */
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: 600;
  color: #666;
  overflow: hidden;
  flex-shrink: 0;
}

.table-avatar {
  float: left;
  margin-right: 2em;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  background: #e0e0e0;
  object-fit: cover;
}

/* Status lozenge for project status */
.status-lozenge {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 1em;
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-stack {
  display: flex;
}

.avatar-stack .avatar {
  margin-left: -8px;
  border: 2px solid white;
}

.avatar-stack .avatar:first-child {
  margin-left: 0;
}

.assignee-lozenge-wrapper {
  position: relative;
}

/* Assignment Lozenge */
.assignee-lozenge {
  position: relative;
  color: #888;
  background: #eee;
  height: 3em;
  line-height: 1em;
  padding: 0.4em 2.5em 0.3em 1.3em;
  border-radius: 4em;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

.lozenge-avatar {
  position: absolute;
  top: calc(0.5em - 1px);
  left: calc(0.5em - 1px);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.lozenge-complete-icon {
  position: absolute;
  top: calc(0.5em - 1px);
  left: calc(0.5em - 1px);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-purple);
  color: #fff;
}

.panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

.assignee-lozenge::after {
  position: absolute;
  top: 0.9em;
  right: 0.7em;
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  content: '\f078';
  width: 1em;
  line-height: 1;
  text-align: center;
  transition: transform linear 200ms;
}

.assignee-lozenge:hover {
  filter: brightness(0.97);
}

.assignee-lozenge.unassigned {
  background: #fff3cd;
  color: #856404;
}

.assignee-lozenge.multiple {
  background: #d4edda;
  color: #155724;
}

.assignee-lozenge.pending-approval {
  background: #f8d7da;
  color: #721c24;
}

/* Due Date Input (inline edit) */
.due-date-input {
  width: 100px;
  padding: 0.2em 0.4em;
  border: 1px solid var(--color-blue);
  border-radius: 4px;
  font-size: 0.75em;
  font-family: inherit;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 650px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-content.modal-wide {
  max-width: 900px;
}

/* History table */
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  background: white;
  border-radius: 0.4em;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
}

.history-table th {
  text-align: left;
  padding: 0.7rem 1.2rem;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--color-blue);
  background: #f5f6f9;
  border-bottom: 1px solid #ddd;
}

.history-table td {
  padding: 0.7em 1.2rem;
  border-bottom: 1px solid #eaebed;
  vertical-align: middle;
}

.history-table .cell-stacked {
  line-height: 1.2;
  white-space: nowrap;
}

.history-table .cell-stacked strong {
  display: block;
}

.history-table .cell-stacked span {
  display: block;
  color: #999;
  font-size: 0.85em;
}

.history-table tr.pending-approval {
  background: var(--color-blue-tint);
  color: var(--color-blue);
}

.history-table tr.pending-approval td {
  border-bottom-color: var(--color-blue-tint);
}

.history-table tr.pending-approval .cell-stacked span {
  color: var(--color-blue);
}

.history-table tr.current-assignee {
  background: var(--color-green-tint);
  color: var(--color-green);
}

.history-table tr.current-assignee td {
  border-bottom-color: var(--color-green-tint);
}

.history-table tr.current-assignee .cell-stacked span {
  color: var(--color-green);
}

.outcome-icon {
  font-size: 1.1em;
}

.outcome-icon.approved {
  color: var(--color-green);
}

.outcome-icon.rejected {
  color: var(--color-pink);
}

.outcome-icon.pending {
}

.outcome-icon.none {
  color: #ccc;
}

/* Timeline edit modal */
.timeline-project-deadline {
  margin-bottom: 1.5em;
  font-size: 0.95em;
  color: #666;
}

.timeline-deadline-link {
  font-weight: 600;
  color: var(--color-blue);
  text-decoration: underline;
  cursor: pointer;
}

.timeline-date-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.timeline-date-row .form-input {
  border-radius: 0.4em;
}

.timeline-pm-btn {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: none;
  background: var(--color-blue-tint);
  color: var(--color-blue);
  font-size: 0.9em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}



.timeline-phases {
  margin-top: 1em;
}

.timeline-phases-header {
  display: grid;
  grid-template-columns: 10em 5em 5em 2em 2em 1fr;
  gap: 0.5em;
  align-items: center;
  padding-bottom: 0.3em;
}

.timeline-col-header {
  text-align: center;
}

.timeline-phase-row {
  display: grid;
  grid-template-columns: 10em 5em 5em 2em 2em 1fr;
  gap: 0.5em;
  align-items: center;
  padding: 0.2em 0;
}

.timeline-phase-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.95em;
  background: #f5f6f9;
  padding: 0.5em 0.8em;
  border-radius: 0.4em;
}

.timeline-phase-dot {
  width: 4px;
  height: 100%;
  min-height: 1.4em;
  border-radius: 2px;
}

.timeline-phase-dot.round {
  background: var(--color-pink);
}

.timeline-phase-dot.feedback {
  background: #ccc;
}

.timeline-days-input {
  text-align: center;
  border-radius: 0.4em;
  width: 100%;
}

.timeline-days-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.timeline-days-input[type=number] {
  -moz-appearance: textfield;
}

.timeline-days-input.actual-under {
  color: var(--color-green);
  background: var(--color-green-tint);
  border-color: var(--color-green-tint);
}

.timeline-days-input.actual-over {
  color: var(--color-pink);
  background: var(--color-pink-tint);
  border-color: var(--color-pink-tint);
}

.timeline-phase-date {
  font-size: 0.9em;
  color: #666;
  text-align: right;
}

.timeline-delivery-check {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 0;
  font-size: 0.9em;
  color: #999;
}

.timeline-delivery-check.match i {
  color: var(--color-green);
}

.timeline-delivery-check.mismatch i {
  color: var(--color-pink);
}

.modal-header {
  display: flex;
  align-items: center;
  padding: 1.2em 2.4em;
  border-bottom: 1px solid #eaebed;
}

.modal-header h2 {
  margin: 0;
  flex: 1;
  padding-right: 1em;
}

.modal-header h2 strong::after {
  content: ' / ';
  color: #ddd;
  margin: 0 0.1em;
  font-weight: normal;
}

.modal-header-logo {
  height: 4.5em;
  margin-top: -1.2em;
  margin-bottom: -1.2em;
  margin-right: 1.6em;
  padding-right: 2em;
  border-right: 1px solid #eaebed;
  display: flex;
  align-items: center;
}

.modal-header-logo-inner {
  width: 90px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-header-logo-inner img {
  max-width: 100%;
  max-height: 100%;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: #999;
  line-height: 1;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 2.4em;
  background: #f5f5f7;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Modal tabs */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 0 2.4em;
  background: white;
  user-select: none;
}

a.modal-tab {
  text-decoration: none;
  color: inherit;
}

.modal-tab {
  padding: 1em 1.25em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.95em;
  color: #666;
}

/* Right-aligned record id sat level with the tab text (e.g. brand modal "ID 123") */
.modal-tabs-id {
  margin-left: auto;
  align-self: center;
  color: #999;
  font-size: 0.85em;
}

.modal-tab:hover {
  color: #333;
}

.modal-tab.active {
  border-bottom-color: var(--color-accent);
  font-weight: 600;
  color: #333;
}

/* File specifications editor (NewUnit Specs tab) */
.filespecs-editor .form-help {
  color: #888;
  margin: 0 0 1em;
}
.filespec-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.6em;
}
.filespec-row.drag-over {
  outline: 2px dashed var(--color-accent);
  outline-offset: 2px;
}
.filespec-handle {
  flex: 0 0 auto;
  cursor: grab;
  color: #aaa;
  padding: 0 0.25em;
}
.filespec-row .form-input {
  flex: 1 1 0;
}

.modal-tab .count {
  color: var(--color-pink);
  font-size: 0.85em;
  margin-left: 0.5em;
}

.modal-tab.has-error {
  color: var(--color-pink);
}

/* Large modal with fixed height body */
.modal-content.modal-lg {
  max-width: 800px;
}

.modal-content.modal-lg .modal-body {
  height: 30em;
}

.modal-content.modal-xlg {
  max-width: 1200px;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-content.modal-xlg .modal-body {
  flex: 1;
  overflow-y: auto;
}

.portfolio-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5em;
}

.portfolio-project-card {
  position: relative;
  border-bottom: 3px solid #ddd;
  border-radius: 0.5em;
  background: #fff;
}

.portfolio-project-grid.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.portfolio-project-grid.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.portfolio-project-card.dragging {
  opacity: 0.4;
}

.portfolio-project-card.drag-over {
  outline: 2px dashed var(--color-accent);
  outline-offset: -2px;
}

.portfolio-project-remove {
  position: absolute;
  top: -0.3em;
  right: -0.3em;
  background: none;
  border: none;
  color: #999;
  font-size: 1.2em;
  cursor: pointer;
  z-index: 1;
}

.portfolio-project-remove:hover {
  color: #666;
}

.portfolio-project-thumb {
  aspect-ratio: 4/5;
  padding: 1em;
  background: #EAECF0;
  border-radius: 0.5em 0.5em 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portfolio-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portfolio-project-info {
  padding: 0.7em;
  text-align: center;
  font-size: 0.85em;
  line-height: 1.3;
}

.portfolio-project-info strong {
  display: block;
}

.portfolio-project-info span {
  color: #999;
}

.project-selector .portfolio-project-card {
  cursor: pointer;
}

.portfolio-project-card.selected {
  color: #fff;
  background: var(--color-pink);
}

.portfolio-project-card.selected .portfolio-project-thumb {
  background: #444;
}

.portfolio-project-card.selected .portfolio-project-thumb img {
  mix-blend-mode: multiply;
}

.portfolio-project-card.selected .portfolio-project-info span {
  color: inherit;
}

.portfolio-project-card .portfolio-project-check {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-pink);
  font-size: 5em;
  z-index: 1;
}

.project-selector-header {
  display: flex;
  align-items: center;
  gap: 1.5em;
  margin-bottom: 1em;
}

.project-selector-header h3 {
  margin-bottom: 0;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75em;
  padding: 1.2em 2.4em;
  border-top: 1px solid #eaebed;
}

.modal-footer .btn-primary {
  margin-left: auto;
}

.btn-link {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0;
  font-family: inherit;
  font-size: 1em;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.btn-link:hover {
  border-color: #bbb;
}

.btn-link.btn-danger {
  color: var(--color-pink);
  border-color: var(--color-pink);
}

.delete-confirm {
  display: flex;
  align-items: center;
  gap: 1em;
}

.delete-confirm span {
  color: var(--text-secondary);
}

/* Sortable List */
.sortable-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.sortable-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 1em;
  background: white;
  border: 1px solid #ddd;
  border-radius: 0.4em;
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sortable-item:hover {
  background: #fafafa;
}

.sortable-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.sortable-item.drag-over {
  border-color: var(--color-accent);
  background: var(--color-pink-tint);
}

.sortable-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sortable-item-title {
  font-weight: 500;
}

.sortable-item-subtitle {
  font-size: 0.85em;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brief section three-dots context menu trigger */
.brief-section-dots {
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 0.2em 0.4em;
  font-size: 1em;
  line-height: 1;
}

.brief-section-dots:hover {
  color: #444;
}

/* "Move to" board flyout submenu — scroll when there are many boards. */
.context-menu.brief-section-submenu {
  max-height: 20em;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ===== Brief per-section comments ===== */

/* Comments button in the section header (standard white button) */
.brief-comments-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  position: relative;
  top: -0.3em;
}

.brief-comments-btn.has-unresolved {
  background: #fdf6c8;
}

/* The brief editor scroll area is the positioning context for the comment panel */
.brief-editor-area {
  position: relative;
}

/* Comment panel: absolutely positioned inside the padded editor area (top set inline),
   sitting in the right gutter the sections reserve, 3em from the content edge */
.brief-editor-standalone .brief-comment-panel {
  right: 0;
}

.brief-comment-panel {
  position: absolute;
  right: 3em;
  width: 30rem;
  max-height: calc(100vh - 12em);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ebedf2;
  border-left: 3px solid #e83e8c;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  padding: 1.2em 1.4em;
  z-index: 900;
}


.brief-comment-list {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}

.brief-comment {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
}

.brief-comment-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: #e9ebf1;
  color: #8a8f9c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72em;
  cursor: pointer;
  user-select: none;
}

.brief-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brief-comment-avatar.status-complete {
  background: #2fb380;
  color: #fff;
}

.brief-comment-avatar.status-ignore {
  background: #c9ccd6;
  color: #fff;
}

.brief-comment-body {
  flex: 1 1 auto;
  min-width: 0;
}

.brief-comment-author {
  font-size: 0.9em;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.2em;
}

.brief-comment-text {
  font-size: 0.9em;
  color: #555;
  line-height: 1.35;
  word-break: break-word;
  padding: 0.25em 0.45em;
  margin: -0.25em 0 -0.25em -0.45em;
  border-radius: 0.4em;
}

/* Inline-editable comment (author editing their own): light gray on hover, pale yellow on focus */
.brief-comment-text.editable {
  cursor: text;
}

.brief-comment-text.editable:hover {
  background: #f4f4f7;
}

.brief-comment-text.editable:focus {
  background: #fffddd;
  outline: none;
}

/* Add-comment box: a distinct bordered input */
.brief-comment-add-input {
  border: none;
  border-radius: 4px;
  padding: 0.4em 0.55em;
  min-height: 2.2em;
  outline: none;
}

.brief-comment-add-input:focus {
  background: #fffddd;
}

.brief-comment.status-complete .brief-comment-text,
.brief-comment.status-ignored .brief-comment-text {
  color: #aab0bd;
  text-decoration: none;
}

.brief-comment-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-top: 0.35em;
}

.brief-comment-images .review-screenshot-thumb {
  width: 54px;
  height: 54px;
}

.brief-comment-replies {
  margin-top: 0.6em;
  padding-left: 0.6em;
  border-left: 2px solid #eef0f4;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.brief-comment-add-btn {
  margin-top: 0.9em;
}

/* Add concept split button */
.add-concept-group {
  display: inline-flex;
}

.add-concept-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.add-concept-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0.7em;
  padding-right: 0.7em;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.add-concept-toggle i {
  transition: transform 0.15s ease;
}

.brief-add-concept.open .add-concept-toggle i {
  transform: rotate(180deg);
}

.add-concept-menu {
  min-width: auto;
  width: max-content;
  max-width: 90vw;
}

.add-concept-menu .context-menu-item {
  white-space: nowrap;
}

.backup-time {
  display: inline-block;
  width: 4em;
}

/* Read-only backup viewer: sections fill the modal (no comment-panel gutter) */
.brief-backup-view .brief-section {
  width: 100%;
}

.sortable-item .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sortable-item .status-dot.active {
  background: var(--color-green);
}

.sortable-item .status-dot.inactive {
  background: #ccc;
}

.sortable-item.inactive {
  color: #aaa;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4em 2em;
  text-align: center;
  color: #666;
}

.empty-state p {
  margin-bottom: 1.5em;
}

/* Loading Skeleton */
.card-skeleton {
  background: white;
  border-radius: 8px;
  padding: 1em;
}

.skeleton-line {
  height: 1em;
  background: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 0.5em;
  animation: skeleton-pulse 1.5s infinite;
}

.skeleton-line.short {
  width: 40%;
}

.skeleton-line.medium {
  width: 70%;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Dashboard2 Styles */
.dashboard-content {
  padding: 0;
  background: #F3F4F7;
  height: calc(100vh - 0px);
  display: flex;
  flex-direction: column;
}

/* Dashboard Tabs */
.dashboard-tabs {
  display: flex;
  gap: 0.25em;
  margin-bottom: 1em;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0;
}

.dashboard-tabs .tab {
  padding: 0.6em 1.2em;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9em;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.dashboard-tabs .tab:hover {
  color: #333;
}

.dashboard-tabs .tab.active {
  color: #333;
  font-weight: 500;
  border-bottom-color: #333;
}

.dashboard-tabs .tab.add-tab {
  color: #999;
}

.dashboard-tabs .tab.add-tab:hover {
  color: #666;
}

/* Dashboard filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 1.5em 3.5em;
}

.filter-bar-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.9em;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
}

.filter-bar-toggle input {
  cursor: pointer;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-left: 1em;
  font-size: 0.85em;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
}

.filter-dropdown-wrapper {
  position: relative;
  /* 100 lifts the wrapper (and its open menu) above the .context-menu-overlay click-catcher
     (z-index:99). The secondary sidebar sits at 101 so it always wins on horizontal scroll. */
  z-index: 100;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 1.2em;
  height: 2.4em;
  border: none;
  border-radius: 2em;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.filter-btn i {
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.filter-btn.open i {
  transform: rotate(180deg);
}

.filter-purple { background: color-mix(in srgb, var(--color-purple) 60%, transparent); }
.filter-blue { background: color-mix(in srgb, var(--color-blue) 60%, transparent); }
.filter-pink { background: color-mix(in srgb, var(--color-pink) 60%, transparent); }
.filter-green { background: color-mix(in srgb, var(--color-green) 60%, transparent); }
.filter-aqua { background: color-mix(in srgb, var(--color-aqua) 80%, transparent); }

.filter-radio {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ccc;
  flex-shrink: 0;
}
.filter-radio.selected {
  border-color: var(--color-aqua);
  background: var(--color-aqua);
  box-shadow: inset 0 0 0 2px #fff;
}

.filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 0.5em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 0.5em 0;
  min-width: 14em;
  max-height: 28em;
  overflow-y: auto;
  scrollbar-width: thin;
  margin-top: 0.3em;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.15em 1em;
  cursor: pointer;
  font-size: 0.9em;
  white-space: nowrap;
}

.filter-option:hover {
  background: #f5f6f9;
}

.filter-option input[type="checkbox"] {
  margin: 0;
}

.filter-option strong {
  color: #999;
  min-width: 2.5em;
}

.filter-divider {
  height: 1px;
  background: #eee;
  margin: 0.3em 0;
}

.manage-tab-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
}

.manage-tab-row .form-input {
  flex: 1;
}

.manage-tab-drag {
  display: flex;
  align-items: center;
  color: #ccc;
  cursor: grab;
  padding: 0 0.2em;
}

.manage-tab-drag:hover {
  color: #666;
}

.manage-tab-drag:active {
  cursor: grabbing;
}

.manage-tab-row.dragging {
  opacity: 0.5;
}

.manage-tab-row.drag-over {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 0.4em;
}

.dashboard-content .modal-tabs {
  padding: 0 3.5em;
  height: 3.4em;
}

.dashboard-content .kanban-board {
  flex: 1;
  min-height: 0;
}

.dashboard-content .kanban-column {
  background: transparent;
}

/* Column Header with Status Dot */
.column-header {
  display: flex;
  align-items: center;
  margin: 0 1.2rem 1rem 1.2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.3em;
}

.column-header h3 {
  margin: 0;
  cursor: pointer;
}

.column-header .count {
  font-size: 0.9em;
  color: #999;
  font-weight: 400;
}

/* Column summary "i" — margin-left:auto pins it to the right of the header row. */
.column-header .column-info-icon {
  margin-left: auto;
  color: #ccc;
  cursor: pointer;
  font-size: 0.95em;
  transition: color 150ms;
}

.column-header .column-info-icon:hover {
  color: var(--color-blue);
}

.column-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding: 0.4em 0;
  border-bottom: 1px solid #ddd;
}

.column-info-row:last-child {
  border-bottom: none;
}

.column-info-row .n {
  font-weight: 600;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0.5em;
  vertical-align: middle;
}

.status-dot.aqua { background: var(--color-aqua); }
.status-dot.blue { background: var(--color-blue); }
.status-dot.green { background: var(--color-green); }
.status-dot.pink { background: var(--color-pink); }
.status-dot.purple { background: var(--color-purple); }
.status-dot.coral { background: var(--color-pink); }
.status-dot.tag-aqua { background: var(--color-aqua); }
.status-dot.tag-blue { background: var(--color-blue); }
.status-dot.tag-green { background: var(--color-green); }
.status-dot.tag-purple { background: var(--color-purple); }
.status-dot.tag-gray { background: #999; }

/* Column Cards Container */
.column-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 0 1.2em 2.5em;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

/* Project Cards */
a.dash-card {
  text-decoration: none;
  color: inherit;
}

.dash-card {
  display: block;
  background: #fff;
  border-radius: 0.4em;
  padding: 0.8em 0.9em;
  line-height: 1.2;
  height: 11em;
  min-height: 11em;
  flex-shrink: 0;
  position: relative;
  border-bottom: 3px solid #e2e2e2;
  cursor: pointer;
  transition: border-color 150ms;
}

/* Cards render as <a> in "Open project directly" mode — keep the card look, not link styling. */
a.dash-card {
  text-decoration: none;
  color: inherit;
}

/* PM dashboard rows in "Open project directly" mode: the first cell carries a stretched <a> whose
   ::after overlays the whole row, so left-click navigates and right-click offers open-in-new-tab. */
tr.pm-dash-row-link {
  position: relative;
  cursor: pointer;
}

a.pm-row-stretch {
  color: inherit;
  text-decoration: none;
}

a.pm-row-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kanban-column.col-aqua .dash-card:hover { border-bottom-color: var(--color-aqua); }
.kanban-column.col-blue .dash-card:hover { border-bottom-color: var(--color-blue); }
.kanban-column.col-green .dash-card:hover { border-bottom-color: var(--color-green); }
.kanban-column.col-pink .dash-card:hover { border-bottom-color: var(--color-pink); }

.dash-card-subtitle {
  font-size: 0.85em;
  color: #aaa;
  line-height: 1.2;
  margin-top: 0.2em;
  margin-bottom: 1em;
  height: 2.4em;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card Header */



.brand-name {
  font-weight: 600;
}

/* Flag ahead of the brand name on a dashboard card. Sized down a touch so it doesn't outweigh the
   card title, and nudged up onto the cap height. */
.board-flag-icon {
  color: var(--color-pink);
  font-size: 0.85em;
  margin-right: 0.45em;
  position: relative;
  top: -0.05em;
}

.job-number {
  font-size: 0.85em;
  font-weight: 600;
}

/* Date Badge (top right corner) */
.date-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.75em;
  padding: 0 0.5em;
  line-height: 1.8;
  border-radius: 0 0.4rem;
  font-weight: 500;
  white-space: nowrap;
  background: #eee;
  color: inherit;
}

.date-badge.empty {
  opacity: 0;
  transition: opacity 150ms;
}

.dash-card:hover .date-badge.empty {
  opacity: 1;
}

.date-badge.future {
  background: #F3F4F7;
  color: #666;
}

.date-badge.soon {
  background: #ddd;
}

.date-badge.overdue {
  color: #fff;
}

/* Footer links */
.date-popover-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.date-popover-links a {
  color: #999;
  font-size: 1.1em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.date-popover-links a:hover {
  color: #666;
}

.date-popover-links img {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
}

.date-popover-links .fa-dropbox {
  color: #0061FF;
}

.date-popover-links .fa-envelope {
  color: var(--color-aqua);
}

/* Per-role budget summary in the dashboard board-card footer */
.dash-budget-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  color: #777;
  line-height: 1.3;
}
.dash-budget-role strong {
  color: #444;
  font-weight: 600;
}
.dash-budget-role .dash-budget-left {
  color: #999;
  margin-left: 0.2em;
}
.dash-budget-sep {
  color: #ccc;
}

/* Assignee lozenge & popover */
/* Dashboard card lozenges */
.dash-card-lozenge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.8em;
  padding: 0 0.8em;
  line-height: 1.6rem;
  border-radius: 1em;
  cursor: pointer;
  white-space: nowrap;
}

.dash-card-lozenge.assigned {
  color: var(--color-green);
  background: var(--color-green-tint);
}

.dash-card-lozenge.unassigned {
  color: #999;
  background: #F3F4F7;
}

.dash-card-lozenge.koc-set {
  color: var(--color-blue);
  background: var(--color-blue-tint);
}

.dash-card-lozenge.awaiting {
  color: var(--color-pink);
  background: var(--color-pink-tint);
}

.dash-card-lozenge.pending-approver {
  color: var(--color-purple);
  background: var(--color-purple-tint);
}

.dash-card-lozenge.discovery {
  color: var(--color-aqua);
  background: var(--color-aqua-tint);
}

.kanban-column.col-aqua .date-badge.overdue { background: var(--color-aqua); }
.kanban-column.col-blue .date-badge.overdue { background: var(--color-blue); }
.kanban-column.col-purple .date-badge.overdue { background: var(--color-purple); }
.kanban-column.col-green .date-badge.overdue { background: var(--color-green); }
.kanban-column.col-pink .date-badge.overdue { background: var(--color-pink); }

/* "Soon" badge: tinted background + solid text in the column's colour. */
.kanban-column.col-aqua .date-badge.soon { background: var(--color-aqua-tint); color: var(--color-aqua); }
.kanban-column.col-blue .date-badge.soon { background: var(--color-blue-tint); color: var(--color-blue); }
.kanban-column.col-purple .date-badge.soon { background: var(--color-purple-tint); color: var(--color-purple); }
.kanban-column.col-green .date-badge.soon { background: var(--color-green-tint); color: var(--color-green); }
.kanban-column.col-pink .date-badge.soon { background: var(--color-pink-tint); color: var(--color-pink); }

/* Card Subtitle */


/* Checklist (SOW, Brief, Assets) */
.card-checklist {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-bottom: 0.75em;
}

.check-item {
  font-size: 0.85em;
  color: #ccc;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.check-item.checked {
  color: #666;
}

.check-item.checked i {
  color: var(--color-aqua);
}

/* Card Footer */
.dash-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0.8em;
  left: 0.9em;
  right: 0.9em;
}

/* Avatar Group */
.avatar-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.avatar-group .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Due Date in footer */
.due-date {
  font-size: 0.75em;
  color: #2a9d8f;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.due-date.soon {
  color: #e67c73;
}

.due-date.overdue {
  color: #dc3545;
  font-weight: 500;
}

/* KOC Badge */
.koc-badge {
  font-size: 0.75em;
  padding: 0.25em 0.6em;
  border-radius: 4px;
  background: #e8f4f8;
  color: var(--color-blue);
}

.koc-badge.muted {
  background: #f5f5f5;
  color: #999;
}

/* Concept Approved */
.concept-approved {
  font-size: 0.8em;
  color: #5cb85c;
  margin-bottom: 0.5em;
}

.concept-approved i {
  margin-right: 0.25em;
}

/* Work Type Badge */
.round-number-badge {
  font-size: 0.8em;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  background: #F3F4F7;
  color: #666;
  font-weight: 500;
}

/* Time in column — sits beside the round badge (board columns) or the lozenge (Pending Approvals).
   Deliberately quiet: it's reference info, not a status the eye should jump to. */
.avatar-group .column-age,
.dash-card-footer > .column-age {
  font-size: 0.8em;
  /* font-variant-numeric: tabular-nums; */
  color: #aaa;
  white-space: nowrap;
  cursor: default;
}

/* Pending Approvals puts the age straight into the footer, which is space-between — as a third child it
   would be spaced out to the middle of the row. margin-right:auto soaks up the free space instead, so the
   age stays tucked against the lozenge it describes and the approver lozenge keeps the right edge. */
.dash-card-footer > .column-age {
  margin-left: 0.5em;
  margin-right: auto;
}

/* Stale: same pill as .round-number-badge, inverted. Board columns flag at 2 days, Pending Approvals at
   2 hours (ColumnAgeBadge.StaleAfterHours). Must stay below the base .column-age rule above — equal
   specificity, so source order decides the colour. */
.column-age.stale {
  padding: 0.2em 0.5em;
  border-radius: 4px;
  font-weight: 500;
  background: var(--color-pink);
  color: #fff;
}

/* Assignee Badge */
.assignee-badge {
  font-size: 0.75em;
  color: #999;
}

/* Round Progress */
.round-progress {
  margin-bottom: 0.5em;
}

.round-progress > span {
  font-size: 0.8em;
  color: #666;
  display: block;
  margin-bottom: 0.35em;
}

.progress-bar {
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #e67c73;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Status Badge */
.status-badge {
  font-size: 0.75em;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.status-badge.awaiting {
  color: #e67c73;
}

.status-badge.awaiting i {
  font-size: 0.9em;
}

/* Page Tabs (settings pages) */
.tabs {
  display: inline-flex;
  gap: 0.25em;
  margin: 0 0 2em 0;
  list-style: none;
  background: #EAECF0;
  padding: 0.4em;
  border-radius: 0.6em;
  font-size: 0.95em;
}

.tabs li {
  position: relative;
}

.tabs a,
.tabs button {
  display: block;
  padding: 0.6em 1em;
  border-radius: 0.35em;
  border: none;
  text-decoration: none;
  color: #666;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, box-shadow 150ms;
}

.tabs a span,
.tabs button span {
  display: inline-block;
  font-size: 0.85em;
  color: #888;
  background: none;
  padding: 0.2em 0.5em;
  border-radius: 0.8em;
  margin-left: 0.4em;
  font-weight: 500;
  min-width: 2.5em;
}

.tabs li.active a,
.tabs li.active button {
  background: #fff;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tabs li.active a span,
.tabs li.active button span {
  color: var(--color-green);
  background: var(--color-green-tint);
}

.tabs a:hover,
.tabs button:hover {
  background: rgba(255, 255, 255, 0.5);
}

.tabs li.active a:hover,
.tabs li.active button:hover {
  background: #fff;
}

/* Nested sidebar navigation */
.secondary-nav .nested-nav {
  display: none;
  list-style: none;
  padding: 0.6em 0;
  margin: 0;
  background: #fff;
  border-radius: 0 0 0.4em 0.4em;
}

.secondary-nav li.expanded > .nested-nav {
  display: block;
}

.secondary-nav .nested-nav li {
  margin-bottom: 0;
}

.secondary-nav .nested-nav li a,
.secondary-nav .nested-nav li button {
  font-size: 0.9em;
  line-height: 1.35;
  padding: 0.35em 0.9rem;
  border-radius: 0;
}

.secondary-nav .nested-nav li a:has(.board-dot) {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.secondary-nav .nested-nav li a .board-dot {
  flex: 0 0 auto;
  margin-right: 0.5em;
  margin-top: 0.35em;
  background: #fff;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.secondary-nav .nested-nav li a .board-dot.status-green { border-color: var(--color-green); }
.secondary-nav .nested-nav li a .board-dot.status-pink { border-color: var(--color-pink); }
.secondary-nav .nested-nav li a .board-dot.status-purple { border-color: var(--color-purple); }

/* Active board link: fill the dot, but keep text colour/weight unchanged (board items only). */
.secondary-nav .nested-nav li a.active:has(.board-dot) {
  color: inherit;
  font-weight: inherit;
}

/* Pressed (:active) board link: don't flash the accent text/background. */
.secondary-nav .nested-nav li a:active:has(.board-dot) {
  color: inherit;
  background: none;
}

.secondary-nav .nested-nav li a.active .board-dot.status-green { background: var(--color-green); }
.secondary-nav .nested-nav li a.active .board-dot.status-pink { background: var(--color-pink); }
.secondary-nav .nested-nav li a.active .board-dot.status-purple { background: var(--color-purple); }

.secondary-nav .nested-nav li a:hover,
.secondary-nav .nested-nav li button:hover {
  background: rgba(0 0 0 / 4%);
}

.nav-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.8em 0.9rem;
}

.nav-actions .btn {
  font-size: 0.8em;
  width: 100%;
  text-align: center;
}

.secondary-nav .nested-nav li a:active,
.secondary-nav .nested-nav li button:active {
  color: var(--color-accent);
  background: transparent;
}

.secondary-nav .nested-nav li a.active,
.secondary-nav .nested-nav li button.active {
  color: var(--color-accent);
  background-color: transparent;
}

.secondary-nav .nested-nav li a.active:hover,
.secondary-nav .nested-nav li button.active:hover {
  background-color: rgba(0 0 0 / 4%);
}

.secondary-nav .nested-nav li a.active:active,
.secondary-nav .nested-nav li button.active:active {
  background-color: rgba(0 0 0 / 8%);
}

.secondary-nav a.has-children {
  position: relative;
}

.secondary-nav > li > a:hover:not(.active),
.secondary-nav > li > a.loading:not(.active) {
  background: rgba(0 0 0 / 8%);
}

.secondary-nav > li > a:active:not(.active) {
  background: rgba(0 0 0 / 12%);
}

.secondary-nav a.has-children::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7em;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s;
}

.secondary-nav li.expanded > a.has-children {
  border-radius: 0.4em 0.4em 0 0;
}

.secondary-nav a.has-children.has-count::after {
  display: none;
}

.secondary-nav li.expanded > a.has-children::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Staff filters (inline in page content) */
.staff-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.staff-filters button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 2rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.staff-filters button:hover {
  border-color: #ccc;
  background: #f5f5f5;
}

.staff-filters button.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.staff-filters button .count {
  margin-left: 0.3rem;
  opacity: 0.7;
}

.staff-filters button.active .count {
  opacity: 0.9;
}

/* Blazor error UI */
#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* =====================================================
   TRACKING PAGE
   ===================================================== */

.tracking-page {
  padding: 0;
}

.week-nav {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.week-nav h1 {
  font-size: 1.7em;
  font-weight: 400;
  margin: 0;
  margin-left: 0.75em;
}

.week-nav h1 .period-label {
  font-weight: 600;
}

.week-nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 1.1em;
}

.week-nav-btn:first-child {
  border-radius: 0.5em 0 0 0.5em;
}

.week-nav-btn:nth-child(2) {
  border-radius: 0 0.5em 0.5em 0;
  margin-left: -1px;
}

.week-nav-btn:hover {
  background: #f5f5f5;
}

.tracking-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stat-box {
  background: #fff;
  border-radius: 8px;
  padding: .5em 0 .7em 0;
  width: 9em;
  text-align: center;
  border-bottom: 3px solid #ddd;
}

.stat-box + .btn { margin-top: 1.5em; margin-left: 1em; }

.stat-label {
  font-size: 0.875em;
  color: #999;
  margin-bottom: 0.2em;
}

.stat-value {
  font-size: 1.5em;
  font-weight: 500;
  color: #101828;
  line-height: 1;
}

/* Hours bar chart */
.hours-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hours-value {
  min-width: 45px;
  text-align: right;
}

.hours-bar {
  width: 15em;
  height: 16px;
  background: #f2f4f7;
  border-radius: 4px;
  display: flex;
  overflow: hidden;
  border: 1px solid #e4e7ec;
}

.timesheet-row-status.submitted {
  color: var(--color-aqua);
}
.timesheet-row-status.approved {
  color: var(--color-green);
}

.bar-billable {
  background: #1570b8;
  height: 100%;
}

.bar-nonbillable {
  background: #7dd3fc;
  height: 100%;
}

/* Billable share coloring */
.share-high {
  color: var(--color-green);
  font-weight: 500;
}

.share-medium {
  color: var(--color-blue);
  font-weight: 500;
}

/* Staff Week Modal */
.staff-week-modal {
  max-width: 1200px;
  width: 95%;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.staff-week-modal .modal-body {
  flex: 1;
  overflow-y: auto;
}

.projects-tab-layout {
  display: flex;
  gap: 3em;
}

.projects-tab-col {
  flex: 1;
}

.projects-tab-col tfoot td {
  font-weight: 600;
  background: #f9f9f9;
}

.staff-week-header {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.5em 2em;
  border-bottom: 1px solid var(--color-border);
}

.staff-week-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-gray-200);
}

.staff-week-info h2 {
  margin: 0;
  font-size: 1.7em;
  font-weight: 600;
  line-height: 1.2;
}

.staff-week-position {
  color: #999;
}

/* Timesheet Table */
.timesheet-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 1em;
}

.timesheet-table tr {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 0.5em;
  margin-bottom: 0.7em;
  border-bottom: 1px solid #ddd;
}

.timesheet-table th,
.timesheet-table td {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.6em 0.3em;
  vertical-align: middle;
}

.timesheet-table th {
  font-weight: normal;
  text-align: right;
  line-height: 1.25;
  padding-right: 1em;
}

.timesheet-table thead tr {
  background: none;
  border-bottom: none;
}

.timesheet-project-col {
  text-align: left !important;
  width: calc(50% - 23em);
  padding: 1em !important;
}

.timesheet-detail-col {
  text-align: left !important;
  width: calc(50% - 23em);
  padding: 1em !important;
}

.timesheet-project-col button {
  margin-right: 0.5em;
}

/* Header actions cell spans the project + detail columns (flex layout ignores colspan) */
.timesheet-actions-col {
  width: calc(100% - 46em);
  text-align: left !important;
  padding: 0 !important;
}
.timesheet-actions-col button {
  margin-right: 0.5em;
}
.timesheet-actions-col .timesheet-save-btn {
  width: 7em;
  min-width: 7em;
}

.action-buttons .budget-save-btn {
  width: 7em;
  min-width: 7em;
}

.timesheet-day-col {
  width: 7em;
}

.timesheet-day-col.absent-day {
  background: var(--color-gray-100);
}

th.timesheet-day-col.absent-day {
  background: #E8EAED;
}

.timesheet-total-col {
  width: 7em;
  text-align: right;
}

.timesheet-remove {
  width: 4em;
  display: flex;
  justify-content: flex-end;
  padding-right: 1em !important;
}

.timesheet-remove .btn-icon {
  background: #eee;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  margin-left: auto;
}

.timesheet-remove .btn-icon:hover {
  background: #ddd;
  color: #666;
}

/* Day header */
.day-name {
  font-weight: 600;
  font-size: 0.9em;
}

.day-date {
  font-size: 0.85em;
  color: var(--color-gray-500);
}

.day-target {
  font-size: 0.9em;
  color: var(--color-pink);
  font-weight: 600;
  margin-top: 0.6em;
  font-variant-numeric: tabular-nums;
}

.day-target.absent {
  color: var(--color-pink);
}

.day-actual {
  font-size: 0.9em;
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}

/* Project info in row */
.timesheet-project-info {
  line-height: 1.3;
}

.timesheet-editable {
  cursor: pointer;
}

/* Timesheet submission / approval status bar */
.timesheet-page-content {
  max-width: 1300px;
}

.timesheet-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.7em 1.2em;
  border-radius: 0.5em;
  margin-top: 1em;
  font-size: 0.95em;
}
.timesheet-status-bar.submitted {
  background: #fff;
  border-bottom: 3px solid #ddd;
}
.timesheet-status-bar.submitted i {
  margin-right: 0.2em;
  color: var(--color-aqua);
}
.timesheet-status-bar.approved {
  background: var(--color-green);
  color: #fff;
}
.timesheet-status-actions {
  display: flex;
  gap: 0.5em;
}

.project-company {
  font-weight: 600;
}

.project-number {
  color: var(--color-pink);
  font-weight: 600;
  font-size: 0.875em;
}

.project-role {
  color: var(--color-pink);
  font-size: 0.9em;
}

.project-role.non-billable {
  color: var(--color-orange);
}

.timesheet-project-name {
  display: block;
  color: #999;
  font-size: 0.875em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timesheet hours */
.timesheet-hours {
  display: inline-block;
  padding: 0.35em 0.5em;
  border-radius: 4px;
  font-weight: 500;
}

.timesheet-cell {
  position: relative;
}

/* Info marker shown on cells whose work session carries notes (read-only; tooltip on hover).
   z-index + pointer-events keep it hoverable above the input — including when the input is
   disabled (approved week), where the disabled control would otherwise swallow the hover. */
.timesheet-note-icon {
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-blue);
  font-size: 0.85em;
  cursor: help;
  z-index: 2;
  pointer-events: auto;
}

/* A disabled input must not intercept the hover destined for the notes icon above it. */
.timesheet-cell .timesheet-input:disabled {
  pointer-events: none;
}

/* Match the dimmed look of the approved (disabled) week — still hoverable for the tooltip. */
.timesheet-note-icon.approved {
  opacity: 0.5;
}

/* Editable cells: solid icon = has note; faint icon revealed on hover = add a note. */
.timesheet-note-icon.editable {
  cursor: pointer;
}

.timesheet-note-icon.add-note {
  opacity: 0;
  transition: opacity 0.12s;
}

.timesheet-cell:hover .timesheet-note-icon.add-note {
  opacity: 0.45;
}

.timesheet-note-icon.add-note:hover {
  opacity: 0.85;
}

/* Edit-timesheet-note modal */
.timesheet-note-modal {
  max-width: 600px;
}

.timesheet-note-textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
}

.timesheet-input {
  width: 100%;
  padding: 0.7em;
  border: 0;
  border-radius: 4px;
  text-align: right;
  background: #f6f7f8;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.timesheet-input.has-value {
  color: var(--color-blue);
  background: #e4f3ff;
  font-weight: 500;
}

.timesheet-input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.timesheet-input::placeholder {
  color: var(--color-gray-300);
}

.timesheet-board-name {
  font-size: 0.95em;
  color: var(--color-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timesheet-role {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--color-blue);
}

.timesheet-role.non-billable {
}

/* =====================================================
   AUTOSUGGEST COMPONENT
   ===================================================== */

.autosuggest {
  position: relative;
  flex: 1;
}

.autosuggest .form-input {
  width: 100%;
}

.autosuggest .form-input.has-value {
  padding-right: 1.9em;
  cursor: default;
}

.autosuggest-clear {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.6em;
  background: none;
  border: none;
  cursor: pointer;
  color: #b0b3bd;
  font-size: 0.95em;
  line-height: 1;
}

.autosuggest-clear:hover {
  color: #666;
}

.autosuggest-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.4em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 2px;
}

.autosuggest-item {
  padding: 0.6em 0.9em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background-color 0.1s;
}

.autosuggest-item:hover,
.autosuggest-item.highlighted {
  background: var(--color-blue-tint);
}

.autosuggest-text {
  font-weight: 500;
  color: #333;
}

.autosuggest-subtext {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.1em;
}

.autosuggest-create {
  padding: 0.6em 0.9em;
  cursor: pointer;
  color: var(--color-green);
  border-top: 1px solid #eee;
  font-weight: 500;
  transition: background-color 0.1s;
}

.autosuggest-create:hover,
.autosuggest-create.highlighted {
  background: var(--color-green-tint);
}

/* Group headers + empty state for the grouped project picker (TimerModal) */
.autosuggest-group-label {
  padding: 0.45em 0.9em 0.2em;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9094a0;
  background: #f7f8fa;
  position: sticky;
  top: 0;
}

.autosuggest-empty {
  padding: 0.6em 0.9em;
  color: #888;
  font-size: 0.9em;
}

/* Report month list: edit-summary button next to each month link */
.report-month-row { display: flex; align-items: center; gap: 0.5em; }
.report-month-link { width: 20em; }
.report-month-edit { color: #b0b3bd; background: none; border: none; cursor: pointer; }
.report-month-edit:hover { color: var(--color-blue); }

/* Report summary editor: captioned image slots */
.report-summary-images { display: flex; gap: 1em; flex-wrap: wrap; }
.report-summary-slot { width: 9em; display: flex; flex-direction: column; gap: 0.4em; }
.report-summary-slot .rs-thumb { position: relative; }
.report-summary-slot .rs-thumb img { width: 100%; height: 6em; object-fit: cover; border-radius: 0.3em; display: block; }
.report-summary-slot .rs-remove {
  position: absolute; top: 0.2em; right: 0.2em; width: 1.5em; height: 1.5em; line-height: 1;
  border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer;
}
.report-summary-slot .rs-empty {
  height: 6em; border: 1px dashed #ccc; border-radius: 0.3em; display: flex; align-items: center;
  justify-content: center; font-size: 0.8em; color: #888; padding: 0.3em; text-align: center;
}
.report-summary-slot .rs-dropzone { flex-direction: column; gap: 0.3em; cursor: pointer; }
.report-summary-slot .rs-dropzone:hover { border-color: var(--color-blue); color: var(--color-blue); }
/* Hide the native file input; the dotted label is the trigger. */
.report-summary-slot .rs-dropzone input[type="file"] { display: none; }

/* Contacts row with switches box */
.contacts-row {
  display: flex;
  align-items: stretch;
}

.contacts-fields {
  flex: 1;
}

.switches-box {
  width: 18em;
  margin-left: 1.5em;
  padding: 1.5em;
  background: rgb(232, 234, 237);
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.switches-box .switch-item {
  margin: 0;
}

/* Form actions (Save/Delete buttons) */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2em;
}

.form-actions-left {
  display: flex;
  align-items: center;
  gap: 1em;
}

.save-error {
  color: var(--color-purple);
  font-weight: 500;
}

.save-success {
  color: var(--color-green);
  font-weight: 500;
}

/* Inline save button that flashes green "Saved" on success, then reverts */
.save-button {
  min-width: 10em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.save-button.btn-saved,
.save-button.btn-saved:hover {
  background: var(--color-green);
  border-color: var(--color-green);
  color: #fff;
}

/* Estimate-accepted pill shown under the Estimate Details heading (legacy style) */
.estimate-accepted-wrap {
  text-align: center;
  margin-bottom: 1.8em;
}

.estimate-accepted-bar {
  display: inline-block;
  padding: 0.5em 0.6em 0.5em 0.8em;
  border-bottom: 3px solid #dadbdd;
  border-radius: 3em;
  background: #fff;
}

.estimate-accepted-check {
  color: var(--color-green);
  font-size: 1.4em;
  margin-right: 0.4em;
  vertical-align: middle;
}

/* Client-submitted brief: centre the accepted-style bar within the brief-content width */
.brief-approval-wrap {
  width: calc(100% - 33rem);
}

.estimate-accepted-text {
  color: #333;
  vertical-align: middle;
}

.estimate-undo-btn {
  background: var(--color-green);
  color: #fff;
  margin-left: 1em;
}

/* =====================================================
   STUDIO BRIEF / CKEDITOR STYLES
   ===================================================== */

body:has(.brief-tabs) {
  overflow-y: hidden;
}

.content.has-topbar:has(.brief-tabs) {
  padding: 0;
  position: relative;
  overflow-y: hidden;
}

.tab-content {
  padding: 3em;
  margin-top: 3.43em;
  height: calc(100vh - 7em - 3.43em);
  overflow-y: scroll;
}

.brief-tabs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.43em;
  padding: 0 3em;
}

/* Brief Section Editor */
.brief-section {
  background: #f4f4f7;
  border-radius: 0.5em;
  margin-bottom: 2em;
  /* Always reserve the right 30rem (+ 3rem gap) for the floating comment panel */
  width: calc(100% - 33rem);
}

.brief-section:last-child { margin-bottom: 0; }

.brief-add-row {
  width: calc(100% - 33rem);
}

/* Brief-template modal reuses the brief editor UI but has no comment panel, so the section
   reclaims the full width (mirrors the portal's .portal-brief override). */
.brief-template-modal .brief-section,
.brief-template-modal .brief-add-row {
  width: 100%;
  max-width: 100%;
}

.brief-section-header {
}

.brief-section-heading {
  display: inline-block;
  font-size: 1.1em;
  color: #fff;
  background: var(--color-blue);
  padding: 0.4em 1.4rem;
  border-radius: 0.5rem 0.5rem 0 0;
  margin: 0;
  outline: 0;
}

.brief-section-heading:focus {
  background: var(--color-pink);
}

.brief-section-body {
  background: #fff;
  padding: 1.4em;
  border-radius: 0 0 0.5rem 0.5rem;
  border-bottom: 3px solid #dadbdd;
  position: relative;
}

.brief-subsection {
  margin-bottom: 1em;
}

.brief-subsection:last-child {
  margin-bottom: 0;
}

.brief-subsection-heading {
  margin: 0 0 0.6rem 0;
  padding: 0.5rem;
  font-size: 1.05em;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  outline: none;
  cursor: text;
  background: transparent;
  transition: background 150ms;
}

.brief-editor-wrapper {
  padding-bottom: 5em;
}

.brief-editor-wrapper .brief-subsection-heading:hover {
  background: #f4f4f7;
}

.brief-editor-wrapper .brief-subsection-heading:focus {
  background: #fffddd;
}

.brief-subsection-markup {
  padding: 0.5rem !important;
  cursor: text;
  min-height: 1em !important;
  outline: 0 !important;
  border: none !important;
  line-height: 1.5 !important;
  transition: background 150ms;
}

.brief-editor-wrapper .brief-subsection-markup:hover {
  background: #f4f4f7;
}

.brief-subsection-markup p { margin: 0 0 1em 0 !important; }
.brief-subsection-markup p:last-child { margin-bottom: 0 !important; }

.brief-subsection-markup { counter-reset: termscounter; }
.brief-subsection-markup a { color: #f32d75; }
.brief-subsection-markup ol { padding-left: 1.8em; margin: 0 0 1.2em 0; }
.brief-subsection-markup ol li { padding-left: 0.5em; margin-bottom: 0.4em; list-style: none; }
.brief-subsection-markup ol li:before { content: counter(termscounter) '. '; counter-increment: termscounter; display: inline-block; width: 1.8em; margin-left: -1.8em; }
.brief-subsection-markup ol li ol { counter-increment: none; margin: 0.4em 0 1.2em 1.3em; }
.brief-subsection-markup ol li ol li { list-style: lower-alpha outside; }
.brief-subsection-markup ol li ol li:before { counter-increment: none; content: ''; }
.brief-subsection-markup ul { padding-left: 2.3em !important; margin: 0 0 1.2em 0 !important; }
.brief-subsection-markup ul:last-child { margin-bottom: 0 !important; }
.brief-subsection-markup ul li { list-style: disc; margin-bottom: 0.4em; }

.brief-subsection-markup:focus {
  background: #fffddd !important;
}

.brief-subsection-editor {
  padding: 0.5em 0;
  min-height: 3em;
  outline: none;
  transition: background 150ms;
}

.brief-subsection-editor:hover {
  background: #f4f4f7;
}

.brief-subsection-editor:focus-within {
  background: #fffddd;
}

.brief-subsection-editor.ck-editor__editable,
.brief-subsection-editor .ck-editor__editable {
  background: #fff;
  padding: 0.2em 0.3em !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  min-height: 1em !important;
}

.ck-powered-by-balloon { display: none !important; }

/* CKEditor container styling */
.ck-editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ck-editor__editable {
  flex: 1;
  min-height: 400px;
  overflow-y: auto !important;
}

.ck.ck-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ck.ck-editor__main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ck.ck-content {
  background: white;
  border-radius: 0 0 0.4em 0.4em;
  padding: 1.5em 2em;
  font-family: inherit;
  line-height: 1.7;
}

.ck.ck-content h1 {
  font-size: 1.8em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.ck.ck-content h2 {
  font-size: 1.4em;
  margin-top: 1.3em;
  margin-bottom: 0.4em;
}

.ck.ck-content h3 {
  font-size: 1.2em;
  margin-top: 1.2em;
  margin-bottom: 0.3em;
}

.ck.ck-content p {
  margin-bottom: 1em;
}

.ck.ck-content ul,
.ck.ck-content ol {
  margin-bottom: 1em;
  padding-left: 2em;
}

.ck.ck-content blockquote {
  border-left: 4px solid var(--color-blue);
  padding-left: 1em;
  margin-left: 0;
  color: #666;
  font-style: italic;
}

.ck.ck-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

.ck.ck-content table td,
.ck.ck-content table th {
  border: 1px solid #ddd;
  padding: 0.5em;
}

.ck.ck-content table th {
  background: #f5f5f5;
  font-weight: 600;
}

/* Comments Sidebar */
.comments-sidebar {
  background: white;
  border-radius: 0.5em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1.25em;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.comments-header h3 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1.1em;
  padding: 0.25em;
  line-height: 1;
}

.btn-close:hover {
  color: #333;
}

.comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 1em;
}

.no-comments {
  color: #888;
  font-size: 0.9em;
  text-align: center;
  padding: 2em 1em;
}

.comment-thread {
  margin-bottom: 1.5em;
  border-left: 3px solid var(--color-blue);
  padding-left: 0.75em;
}

.comment-thread.resolved {
  border-left-color: #ccc;
  opacity: 0.7;
}

.comment {
  background: #f9f9f9;
  border-radius: 0.4em;
  padding: 0.75em;
  margin-bottom: 0.5em;
}

.comment.reply {
  margin-left: 1em;
  background: #f5f5f5;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4em;
}

.comment-author {
  font-weight: 600;
  font-size: 0.9em;
  color: #333;
}

.comment-date {
  font-size: 0.75em;
  color: #999;
}

.comment-text {
  margin: 0;
  font-size: 0.9em;
  color: #444;
  line-height: 1.4;
}

.comment-actions {
  margin-top: 0.5em;
  display: flex;
  gap: 0.75em;
}

.comment-actions .btn-link {
  font-size: 0.8em;
  color: var(--color-blue);
}

.resolved-badge {
  font-size: 0.75em;
  color: var(--color-green);
  font-weight: 500;
}

/* Connection status */
.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85em;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
}

.connection-dot.connected {
  background: var(--color-green);
}

.connection-dot.reconnecting {
  background: var(--color-orange);
  animation: pulse 1s infinite;
}

.connection-dot.offline {
  background: #dc3545;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =====================================================
   PROJECT COSTS PAGE
   ===================================================== */

.costs-page {
}

/* V2 line items table */
.line-items-table.v2 {
  height: 1px;
}

.line-items-table.v2 th {
  border: none;
  padding: 0.5em;
}

.line-items-table.v2 td {
  border: 1px solid #ddd;
  padding: 0;
  vertical-align: top;
  background: #fff;
  line-height: 1.2;
}

.line-items-table.v2 td:not(:has(label)) {
  padding: 0.8em;
}

.line-items-table.v2 td > label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: text;
}

.line-items-table.v2 td > label > input,
.line-items-table.v2 td > label > select,
.line-items-table.v2 td > label > textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.8em;
  line-height: 1.2;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1em;
  display: block;
  resize: none;
}

.line-items-table.v2 td > label > textarea.grows {
  field-sizing: content;
  height: auto;
  overflow: hidden;
}

.line-items-table.v2 td > label > select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23888' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
}

.line-items-table.v2 td > label > input:focus,
.line-items-table.v2 td > label > select:focus,
.line-items-table.v2 td > label > textarea:focus {
  outline: none;
}

.line-items-table.v2 td > label:focus-within {
  background: #fffbe6;
}

.line-items-table.v2 .btn-icon {
  width: 1.2em;
  height: 1.2em;
}

.line-items-table.v2 tr.v2-dragging > td {
  opacity: 0.4;
}

.line-items-table.v2 tr.v2-drag-over > td {
  border-top: 2px solid var(--color-blue);
}

.line-items-table.v2 input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.line-items-table.v2 input[type="number"]::-webkit-outer-spin-button,
.line-items-table.v2 input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.role-hour-group {
  display: flex;
  background: #fff;
  border-radius: 8px;
  border-bottom: 3px solid #ddd;
  overflow: hidden;
}

.role-hour-cell {
  padding: 0.4em 0.8em;
  min-width: 8em;
  text-align: right;
}

.role-hour-cell + .role-hour-cell {
  border-left: 1px solid #ddd;
}

.role-hour-label {
  font-size: 0.8rem;
}

.role-hour-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 1.1em;
}

.costs-header {
  margin-bottom: 1.5em;
}

.costs-header h2 {
  margin: 0;
  font-size: 1.5em;
  font-weight: 600;
}

/* Estimate Tabs */
.estimate-tabs {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-bottom: 2.5em;
}

.estimate-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.8em 1em;
  background: #ffffff66;
  border: 0;
  color: #aaa;
  border-radius: 0.4em;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  min-width: 100px;
  transition: border-color 0.15s, background 0.15s;
  border-bottom: 3px solid #ddd;
}

.estimate-tab:hover {
  border-color: #dAdCe0;
  background: white;
}

.estimate-tab.active {
  border-color: var(--color-pink);
  background: white;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.05);
}

.estimate-tab.active .tab-name {
  color: #333;
}

.estimate-tab.active .tab-amount {
  color: #999;
}

.estimate-tab .tab-badge {
  display: inline-block;
  padding: 0.15em 0.4em;
  background: var(--color-blue);
  color: #fff;
  font-size: 0.7em;
  font-weight: 500;
  border-radius: 0.25em;
  margin-bottom: 0.3em;
}

.estimate-tab.active .tab-badge {
  background: var(--color-pink);
  color: #fff;
}

.estimate-tab .tab-name {
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.3;
}


.estimate-tab .tab-amount {
  color: #ccc;
  font-size: 0.85em;
}

.estimate-tab-accepted {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--color-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
}

.estimate-tab.add-tab {
  justify-content: center;
  align-items: center;
  color: #666;
  min-width: auto;
  padding: 0.8em 1.2em;
}

.estimate-tab.add-tab:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

.estimate-tab.add-tab i {
  margin-right: 0.3em;
}

/* Estimate Panel */
.estimate-panel {
  background: #f5f6f9;
  border-radius: 0.5em;
  position: relative;
}

.estimate-form-row {
  display: flex;
  gap: 1em;
  align-items: flex-end;
  margin-bottom: 1em;
  flex-wrap: wrap;
  border-radius: 0 0.5em 0.5em 0.5em;
}

.estimate-form-row > .form-group-inline {
  margin-bottom: 0;
}

.estimate-form-row .form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 150px;
}

.estimate-form-row .form-group:first-child {
  flex: 1.5;
}

.estimate-actions {
  display: flex;
  gap: 0.8em;
  align-items: center;
  position: relative;
  top: -0.5em;
}

.estimate-actions .btn {
  white-space: nowrap;
}

.estimate-actions .btn i {
  margin-right: 0.3em;
}

.btn-icon {
  background: #f5f5f5;
  border: none;
  border-radius: 0.4em;
  width: 2.3em;
  height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  font-size: 1em;
}

.btn-icon:hover {
  background: #eee;
  color: #333;
}

/* Estimate Summary */
/* Line Items Table */
.line-items-section {
  margin-top: 2em;
}

.line-items-table {
  margin-bottom: 0;
}

.line-items-table th {
  padding: 0.6em 0.8em;
  color: #fff;
  background: var(--color-blue);
}

.line-items-table th.text-right {
  padding-right: 0.8em;
}

.line-items-table th:first-child {
  border-top-left-radius: 0.4em;
}

.line-items-table th:last-child {
  border-top-right-radius: 0.4em;
}

.line-items-table td {
  padding: 0.4em 0.5em;
  vertical-align: middle;
}

.line-items-table .col-drag {
  width: 2.5em;
  text-align: center;
}

.line-items-table .col-description {
  width: auto;
}

.line-items-table .col-quantity {
  width: 7em;
}

.line-items-table .col-rate {
  width: 8em;
}

.line-items-table .col-secondary {
  width: 8em;
}

.line-items-table .col-total {
  width: 8em;
  font-weight: 500;
  padding-right: 1em;
}

.line-items-table .col-actions {
  width: 3em;
  text-align: center;
}

.drag-handle {
  color: #ccc;
  cursor: grab;
}

.drag-handle:hover {
  color: #999;
}

.line-input {
  width: 100%;
  padding: 0.5em 0.6em;
  border: 1px solid transparent;
  border-radius: 0.3em;
  font-family: inherit;
  font-size: 1em;
  background: transparent;
}

.line-input:hover {
  background: #f9f9f9;
}

.line-input:focus {
  outline: none;
  border-color: var(--color-blue-tint);
  background: white;
}

.line-input.text-right {
  text-align: right;
}

.btn-remove {
  background: transparent;
  color: #ccc;
  width: 1.8em;
  height: 1.8em;
}

.btn-remove:hover {
  background: #fee;
  color: #c00;
}

/* Line Items Footer */
.line-items-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 0;
  border-top: 1px solid #eee;
  margin-top: 0.5em;
}

.add-row-btn {
  color: var(--color-blue);
  font-weight: 500;
  padding: 0.5em 0;
}

.add-row-btn i {
  margin-right: 0.3em;
}

.estimate-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 3.7rem;
  font-size: 0.95em;
}

.estimate-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2em;
  min-width: 25em;
  padding: 0.2rem 0;
}

.estimate-total-row .total-amount {
  font-size: 1em;
  font-weight: 500;
  text-align: right;
}

.estimate-total-row.total-grand {
  border-top: 1px solid #777;
  margin-top: 0.6em;
}

/* No breakdown: plain stacked total (label above amount, right-aligned, no rule) */
.estimate-total-row.total-grand-solo {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  border-top: none;
  margin-top: 0;
  min-width: 0;
  gap: 0;
}

.estimate-total-row.total-grand-solo .total-label {
  font-size: 0.9em;
}

.estimate-total-row.total-grand .total-amount {
  font-size: 1.2em;
  font-weight: 600;
}

.total-label {
}

.total-amount {
  font-size: 1.3em;
  font-weight: 600;
  color: #222;
}

/* Product Autosuggest in Line Items */
.line-items-table {
  overflow: visible;
}

.product-suggest-cell {
  position: relative;
  overflow: visible !important;
}

.product-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 0.4em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
  min-width: 300px;
}

.product-suggestion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0.75em;
  cursor: pointer;
  font-size: 0.9em;
}

.product-suggestion:hover,
.product-suggestion.highlighted {
  background: #f0f4ff;
}

.suggestion-name {
  color: #333;
}

.suggestion-price {
  color: #888;
  font-size: 0.85em;
  margin-left: 1em;
  white-space: nowrap;
}

/* Form Actions */

/* ============================================
   CREATIVE PAGE STYLES
   ============================================ */

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4em 2em;
  color: #666;
}

.empty-state-icon {
  font-size: 4em;
  color: #ddd;
  margin-bottom: 0.5em;
}

.empty-state h3 {
  font-size: 1.4em;
  font-weight: 600;
  color: #444;
  margin-bottom: 0.5em;
}

.empty-state p {
  margin-bottom: 1.5em;
}

/* Board Cards Grid */
.board-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
}

/* Board Card */
.board-card {
  display: flex;
  height: 20em;
  background: white;
  border-radius: 0.5em;
  border-bottom: 3px solid #ddd;
  overflow: visible;
  transition: transform 150ms;
  cursor: pointer;
}

.board-card:hover {
}

.board-card.dragging {
  opacity: 0.5;
}

.board-card.drag-over {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.board-card-thumbnail {
  width: 50%;
  height: 100%;
  background: #E8EAED;
  flex-shrink: 0;
  cursor: pointer;
  padding: 1.3em;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0.5em 0 0 0.5em;
  justify-content: center;
  box-sizing: border-box;
}

.board-card-thumbnail img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.board-card-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-card-logo img {
  max-width: 6.5em;
  max-height: 4em;
  mix-blend-mode: multiply;
}

.board-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 2.5em;
}

.board-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.6em;
}


.board-card-header {
  min-height: 6.5em;
  margin-bottom: 1em;
}

.board-card-header h4 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

.board-card-status {
  display: inline-block;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 2em;
  border-radius: 1em;
  padding: 0 1em;
}

.board-card-status.status-studio { color: var(--color-green); background: var(--color-green-tint); }
.board-card-status.status-client { color: var(--color-pink); background: var(--color-pink-tint); }
.board-card-status.status-approved { color: var(--color-purple); background: var(--color-purple-tint); }

.board-card-meta {
  font-weight: 600;
}

.board-card-stats {
  color: #999;
}

.board-card-stats span {
  display: block;
  line-height: 1.2;
}

.board-card-progress {
  margin-top: auto;
}

.board-card-progress .progress-fill {
  animation: progressGrow 500ms ease-out forwards;
  transform-origin: left;
}

@keyframes progressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.board-card-progress .progress-text {
  display: block;
  font-size: 0.85em;
  color: #888;
  margin-top: 0.4em;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-green);
  border-radius: 2px;
  transition: width 300ms;
}

.progress-text {
  font-size: 0.8em;
  color: #888;
  white-space: nowrap;
}

/* ============================================
   BOARD VIEW PAGE STYLES
   ============================================ */

/* Assignee Bar */
.assignee-bar {
  padding: 0.5em;
  background: #fff;
  border-radius: 2em;
  margin-bottom: 2em;
  height: 4em;
  box-shadow: 0 0.4em 0.8em rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
}

.assignee-lozenges {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
}


.assignee-lozenge.lozenge-unassigned {
  background: #e8e8e8;
  color: #666;
}

.assignee-lozenge.lozenge-assigned {
  background: var(--color-green-tint);
  color: var(--color-green);
}

.assignee-lozenge.has-user {
  padding-left: 3em;
}

.assignee-lozenge.lozenge-pending {
  background: var(--color-purple-tint);
  color: var(--color-purple);
}

.assignee-lozenge.lozenge-approved {
  background: white;
  color: var(--color-purple);
  border: 1px solid color-mix(in srgb, var(--color-purple) 40%, transparent);
}

.assignee-lozenge:hover {
  filter: brightness(0.97);
}

.assignee-lozenge.expanded {
  filter: brightness(0.97);
}

.assignee-lozenge.expanded::after {
  transform: rotate(180deg);
}

.lozenge-label {
  display: block;
  font-weight: 600;
  font-size: 1.05em;
}

.lozenge-user {
  font-size: 0.75em;
  font-weight: 500;
}

.assignee-add-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: transparent;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.assignee-add-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.assignee-due-date-wrapper {
  position: relative;
  flex-shrink: 0;
}

.assignee-due-date-btn {
  background: #f0f0f3;
  border: none;
  border-radius: 2em;
  padding: 0.5em 1.2em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  font-family: inherit;
  font-size: 1rem;
}

.assignee-due-date-btn:hover {
  background: #e8e8ec;
}

.assignee-due-date-btn i {
  font-size: 1.3em;
  color: #999;
}

/* Per-board timer button at the far right of the assignee bar */
.assignee-timer-btn {
  flex-shrink: 0;
  margin-left: 0.5em;
  padding-left: 0.17em;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1em;
  transition: filter 0.15s ease;
}

.assignee-timer-btn i { font-size: 1.1em; }
.assignee-timer-btn:hover { filter: brightness(1.07); }
.assignee-timer-btn.timer-default { background: var(--color-pink); }
.assignee-timer-btn.timer-match { background: var(--timer-match-gradient); }
.assignee-timer-btn.timer-other { background: var(--timer-running-gradient); }

.due-date-value {
  font-weight: 600;
  color: #333;
}

.due-date-time {
  font-size: 0.85em;
  color: #888;
}

.assignee-due-date-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  background: #fff;
  border-radius: 0.5em;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.15);
  padding: 1em;
  margin-top: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 200px;
}

.assignee-due-date-panel .form-input {
  margin-bottom: 0.5em;
  border-radius: 0.4em;
}

.assignee-due-date-panel .form-input:last-child {
  margin-bottom: 0;
}

.due-date-tz-label {
  font-size: 0.8em;
  color: #999;
  margin-top: 0.4em;
  display: block;
}

.due-date-tz-label i {
  margin-right: 0.1em;
}

/* Assignee Panel */
.assignee-panel,
.assignee-add-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #fff;
  border-radius: 0.5em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 1em;
  min-width: 350px;
  animation: panel-appear 150ms ease-out;
  margin-top: 0.5em;
}

.small-form .form-group { margin-bottom: 1em; }
.small-form .form-group:last-child { margin-bottom: 0; }
.small-form select,
.small-form .form-input { font-size: 0.9em; }

.assignee-delete-btn {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.2em;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.2em;
}
.assignee-delete-btn:hover { color: #999; }

.assignee-delete-confirm {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.9em;
}

.assignee-fields { position: relative;
  background: #f5f5f7;
  border-radius: 0.4em;
  padding: 1em;
  margin-bottom: 1em;
}

.assignee-fields:last-child {
  margin-bottom: 0;
}


.assignee-panel h4,
.assignee-add-panel h4 {
  margin: 0 0 1em 0;
  font-size: 1em;
  font-weight: 600;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
  padding-bottom: 0.75em;
  border-bottom: 1px solid #eee;
}

.panel-worktype {
  font-weight: 600;
}

.panel-user {
  color: #666;
}

.panel-section {
  margin-bottom: 1em;
  background: #f5f5f7;
  border-radius: 0.4em;
  padding: 1em;
}

.panel-info {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 1em;
}

.panel-requested-by {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1em;
}

.panel-requested-avatar { width: 2.2em; height: 2.2em; border-radius: 50%; object-fit: cover; }
.panel-requested-name { font-size: 0.9em; }
.panel-requested-date { font-size: 0.8em; color: #999; }

@keyframes panel-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-actions-centered { display: flex; justify-content: center; gap: 0.5em; background: #f5f5f7; padding: 0.8em; border-radius: 0.4em; }

.panel-deliverable-list { margin-bottom: 1em; border-top: 1px solid #ddd; padding-top: 1em; }
.panel-warning { color: var(--color-purple); font-size: 0.85em; font-weight: 600; text-align: center; margin-bottom: 0.5em; }

.panel-approver-list + .panel-actions-centered { margin-top: 1em; }
.panel-actions-centered + .panel-deliverable-list { border-top: none; }
.panel-deliverable-item { display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; }
.panel-deliverable-list.has-icons .panel-deliverable-item { padding: 0.15em 0; }
.panel-deliverable-icon { font-size: 0.8em; width: 1em; text-align: center; }
.panel-deliverable-icon.approved { color: var(--color-green); }
.panel-deliverable-icon.rejected { color: var(--color-pink); }
.panel-deliverable-icon.pending { color: #ccc; }
.panel-deliverable-link { color: inherit; text-decoration: none; }
.panel-deliverable-link:hover { color: var(--color-blue); }

/* Approver Response Bar */
.approver-response-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 1em 0.6em 0.6em;
  background: #f5f5f7;
  border-radius: 2em;
  margin-top: 0.5em;
}

.approver-response-avatar { width: 2em; height: 2em; border-radius: 50%; object-fit: cover; }
.approver-response-label { flex: 1; font-size: 0.9em; }
.approver-response-buttons { display: flex; gap: 0.3em; }

.approver-response-btn { border: 1px solid #ddd; background: #fff; border-radius: 0.3em; }
.approver-response-btn:hover { background: #f0f0f0; }
.approver-response-btn.active-yes { background: var(--color-green); color: #fff; border-color: var(--color-green); }
.approver-response-btn.active-no { background: var(--color-pink); color: #fff; border-color: var(--color-pink); }

.panel-rejected { margin-top: 1em; border-top: 1px solid #ddd; padding-top: 1em; }
.panel-rejected h4 { font-size: 0.9em; font-weight: 600; margin: 0 0 0.5em; }
.panel-rejected-item { display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; }
.panel-rejected-approver { color: #999; font-size: 0.9em; }

.panel-approver-list { border-top: 1px solid #ddd; padding-top: 0.8em; }
.panel-approver-item { display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; padding: 0.15em 0; }
.panel-approver-icon { font-size: 0.8em; }
.panel-approver-icon.complete { color: var(--color-green); }
.panel-approver-icon.rejected { color: var(--color-pink); }
.panel-approver-icon.pending { color: #ccc; }

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-height: 150px;
  overflow-y: auto;
  user-select: none;
  scrollbar-width: thin;
}

.checkbox-list-tight {
  gap: 0.1em;
  background: #fff;
  padding: 0.8em;
  border-bottom: 3px solid #ddd;
  border-radius: 0 0.4em 0.4em 0.4em;
}

.checkbox-list-tight:not(:last-child) { margin-bottom: 1em; }

.panel-label-row { display: flex; justify-content: space-between; align-items: center; }
.panel-select-all { font-size: 0.8em; color: #999; cursor: pointer; user-select: none; }
.panel-select-all:hover { color: #666; }

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font-size: 0.9em;
  white-space: nowrap;
}

.checkbox-item-with-label { display: flex; align-items: center; justify-content: space-between; }
.approver-label-select { font-size: 0.8em; padding: 0.1em 0.3em; border: 1px solid #ddd; border-radius: 0.3em; color: #666; background: #fff; outline: none; }

.checkbox-item input[type="checkbox"] {
  width: 1em;
  height: 1em;
}

.deliverable-status-list {
  margin-bottom: 1em;
}

.deliverable-status-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0;
  font-size: 0.9em;
}

.status-icon {
  width: 1.2em;
  text-align: center;
}

.status-icon.status-approved { color: var(--color-green); }
.status-icon.status-rejected { color: var(--color-pink); }
.status-icon.status-pending { color: #999; }

.panel-approvers {
  margin-bottom: 1em;
  font-size: 0.9em;
}

.approver-status {
  display: flex;
  gap: 0.5em;
  padding: 0.3em 0;
}

.status-text {
  color: #888;
}

.panel-actions {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

.form-actions {
  display: flex;
  gap: 0.5em;
  justify-content: flex-end;
  margin-top: 1em;
}

.btn-sm {
  font-size: 0.8rem;
  line-height: 2.2em;
  height: 2.2em;
  padding: 0 1em;
}

/* Board Header */
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3em;
  gap: 1em;
}

.board-header-left {
  display: flex;
  align-items: center;
  gap: 1em;
  flex: 1;
  position: relative;
}

.board-heading {
  margin: 0 1em 0 0;
  cursor: pointer;
}

/* The board heading is much larger than a card title, so the shared flag needs sizing down here.
   Colour and alignment come from .board-flag-icon. */
.board-heading .board-flag-icon {
  font-size: 0.8em;
}

.board-name::after {
  content: ' / ';
  color: #ddd;
  margin: 0 0.1em;
  font-weight: normal;
}

.board-round {
  font-weight: 400;
  color: #666;
  font-size: 0.9em;
}

.board-description {
  margin: -2.3rem 0 3rem 0;
  padding: 0 0 0 0.6em;
  font-size: 0.85em;
  border-left: 4px solid #d2d2d2;
  color: #888;
  max-width: 24em;
  line-height: 1.3;
}

.board-menu-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.2em 0.5em;
  transition: transform linear 200ms;
}

.board-menu-btn.active {
  transform: rotate(180deg);
}

.board-menu-btn:hover {
  color: #666;
}

.context-menu-wrapper {
  position: relative;
}

/* Shared Context Menu */
.context-menu {
  position: absolute;
  top: 100%;
  z-index: 100;
  background: #fff;
  border-radius: 0.5em;
  border: 1px solid #e2e2e2;
  box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.2);
  min-width: 240px;
  padding: 0.5em 0;
  font-size: 0.9em;
}

.context-menu-section {
  padding: 0.3em 0;
}

.context-menu-info {
  padding: 0.4em 1.2em;
  font-size: 0.85em;
  color: #333;
  font-weight: 400;
}

.context-menu-divider {
  border-top: 1px solid #ddd;
  margin: 0.2em 0;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  text-decoration: none;
  width: 100%;
  padding: 0.25em 1.2em;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}

.context-menu-item:hover {
  background: #f5f5f5;
}

.context-menu-item i {
  width: 1.2em;
  text-align: center;
  color: var(--color-blue);
}

.context-menu-item.context-menu-danger i {
  color: var(--color-pink);
}

/* ===== Context menu flyout (hover-opened submenu) ===== */

/* The parent row is a div, not a button, so it can contain the submenu. */
.context-menu-item.has-flyout {
  position: relative;
  justify-content: flex-start;
}

.context-menu-item.has-flyout .flyout-arrow {
  margin-left: auto;
  font-size: 0.8em;
  color: #bbb;
}

/* Sits to the right, overlapping the parent's border so the pointer can cross without a gap
   closing the menu. Aligned to the top of its row rather than the menu. */
.context-menu-flyout {
  display: none;
  top: -0.5em;
  left: calc(100% - 0.3em);
  min-width: 210px;
  /* .context-menu sets 0.9em; nested inside another menu that would compound to 0.81em. */
  font-size: 1em;
  /* cursor is inherited, and the parent row is a .context-menu-item (pointer) — so without this the
     footer text reads as clickable. The buttons inside set their own pointer. */
  cursor: default;
}

.context-menu-item.has-flyout:hover .context-menu-flyout {
  display: block;
}

/* Marks the flagged state — on the parent row's flag, so it reads at a glance without opening the
   submenu, and on the selected reason inside it. */
.context-menu-item i.flag-set {
  color: var(--color-pink);
}

.context-menu-footer {
  padding: 0.5em 1.2em;
  font-size: 0.85em;
  color: #333;
}

.context-menu-footer span {
  display: block;
}

.context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

/* Board Menu (extends context-menu) */
.board-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  z-index: 100;
  margin-top: 1em;
}

/* Import dropdown (extends context-menu) */
.import-menu-dropdown {
  left: 0;
  right: auto;
  margin-top: 0.5em;
}

/* Import trigger: match the board-status chevron (size, spacing, swivel-on-open). */
.import-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.import-trigger .import-chevron {
  font-size: 0.8em;
  font-weight: 900;
  color: #999;
  transition: transform linear 200ms;
}

.import-trigger.active .import-chevron {
  transform: rotate(180deg);
}

.board-menu-arrow {
  margin-left: auto;
  font-size: 0.8em;
  color: #999;
}

.board-status-dropdown {
  position: relative;
}

.board-status-btn {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 1.2em;
  height: 2.4em;
  border: none;
  border-radius: 2em;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

.board-status-btn i { font-size: 0.8em; font-weight: 900; transition: transform linear 200ms; }

.board-status-btn.active i { transform: rotate(180deg); }

.board-status-green { background: var(--color-green); }
.board-status-pink { background: var(--color-pink); }
.board-status-purple { background: var(--color-purple); }
.board-status-blue { background: var(--color-blue); }

.board-status-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #fff;
  border-radius: 0.5em;
  border: 1px solid #e2e2e2;
  box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.2);
  min-width: 10em;
  padding: 0.5em 0;
  margin-top: 0.5em;
  font-size: 0.9em;
}

.board-status-option {
  display: flex;
  align-items: center;
  padding: 0.5em 1em;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: #333;
  text-align: left;
}

.board-status-option:hover {
  background: #f5f5f5;
}

.board-status-option.selected {
  font-weight: 600;
}

.status-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
}

.status-dot.status-green { background: var(--color-green); }
.status-dot.status-pink { background: var(--color-pink); }
.status-dot.status-purple { background: var(--color-purple); }

.board-header-right {
  display: flex;
  align-items: center;
  gap: 1.5em;
  flex-shrink: 0;
}

.board-due-date {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: #666;
  font-size: 0.9em;
}

.board-toggle {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}

.toggle-label {
  font-size: 0.92em;
}

.board-actions {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-left: 1em;
  padding-left: 1em;
  border-left: 1px solid #ddd;
}

/* Round Intro */
.round-intro {
  display: flex;
  gap: 0.5em;
  margin-bottom: 3.5em;
  padding: 1em;
  background: white;
  border-radius: 0.5em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.rationale-box {
  flex-direction: column;
  gap: 0;
}

.rationale-view-toggle-wrap {
  max-width: 800px;
  margin: -3.2em auto 1.7em auto;
  text-align: right;
}

.rationale-view-toggle {
  color: #bbb;
  font-size: 0.85em;
  cursor: pointer;
  user-select: none;
}

.rationale-view-toggle:hover {
  color: #888;
}

.rationale-readonly-text {
  white-space: pre-wrap;
  line-height: 1.35;
}

.rationale-item {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  padding: 0.5em 0;
  width: 100%;
}

.rationale-box > .btn {
  align-self: flex-start;
  margin-top: 0.8em;
}

.rationale-box > .btn:first-child {
  margin-top: 0;
}

.rationale-item:first-child {
  padding-top: 0;
}

.rationale-item + .rationale-item {
  border-top: 1px solid #ddd;
}

.rationale-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.rationale-status-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  border: none;
  padding: 0;
}

.rationale-status-icon.accepted {
  background: var(--color-green);
}

.rationale-status-icon.ignored {
  background: #ddd;
}


.rationale-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  margin-top: 0.3em;
}

.intro-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.intro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  font-weight: 600;
  color: #666;
}

.intro-avatar:hover {
  opacity: 0.8;
}

.intro-content {
  flex: 1;
}

.intro-textarea {
  width: 100%;
  border: none;
  font-family: inherit;
  font-size: 1em;
  line-height: 1.35;
  padding: 0.25em 0.45em;
  border-radius: 0.4em;
  outline: none;
  cursor: text;
}

.intro-textarea:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
}

.intro-textarea:hover {
  background: #f4f4f7;
}

.intro-textarea:focus {
  background: #fffddd;
}

/* Deliverable Grid */
.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  padding-bottom: 3em;
}

/* Deliverable Card */
.deliverable-card {
  display: flex;
  height: 20em;
  background: white;
  border-radius: 0.5em;
  border-bottom: 3px solid #ddd;
  overflow: visible;
  transition: transform 150ms;
}

.deliverable-card.dragging {
  opacity: 0.5;
}

.deliverable-card.drag-over {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.deliverable-thumbnail {
  width: 50%;
  height: 100%;
  background: #E8EAED;
  flex-shrink: 0;
  cursor: pointer;
  padding: 1.3em;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0.5em 0 0 0.5em;
  justify-content: center;
  box-sizing: border-box;
}

.deliverable-thumbnail img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.deliverable-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 2em;
}

.deliverable-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.deliverable-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
}

.deliverable-header-left {
  flex: 1;
}

.deliverable-name {
  margin: 0 0 0.4em 0;
  padding-right: 0.5em;
}

h3 {
  font-size: 1.17em;
  font-weight: 600;
  margin-bottom: 0.7em;
}

h4 {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

h4:last-child {
  margin-bottom: 0;
}

.deliverable-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin: 0.2em 0 -0.2em 0;
}

.deliverable-tag {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 0.3em;
  font-size: 0.75rem;
  font-weight: 500;
}

.deliverable-tag-dropbox {
  display: inline-flex;
  align-items: center;
  padding: 0 0.3em;
  color: #0061FF;
  font-size: 0.9rem;
  text-decoration: none;
}

.deliverable-tag-dropbox:hover {
  opacity: 0.8;
}

.deliverable-status {
  position: absolute;
  top: 9rem;
  left: 1rem;
  line-height: 1.1;
}

.deliverable-status strong {
  font-size: 2.2em;
  font-weight: 500;
  display: block;
}

.deliverable-status span {
  font-size: 0.9em;
  color: #888;
}

.deliverable-dropbox-lozenge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: calc(100% - 2rem);
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: 1.15em;
  height: 2.3em;
  line-height: 2.3em;
  padding: 0;
}

button.deliverable-dropbox-lozenge { cursor: pointer; }
button.deliverable-dropbox-lozenge:hover { filter: brightness(0.96); }

.dropbox-updating {
  background: #eee;
  color: #888;
}
.dropbox-updating::before { content: '\f021'; }

.deliverable-dropbox-lozenge::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  display: inline-block;
  width: 1.2em;
  text-align: center;
  margin-right: 0.2em;
  font-size: 1.1em;
}

.dropbox-uptodate::before { content: '\f00c'; }
.dropbox-notfound::before { content: '\f06a'; }
.dropbox-updated::before { content: '\f021'; }

.dropbox-uptodate {
  background: var(--color-green-tint);
  color: var(--color-green);
}

.dropbox-updated {
  background: var(--color-blue-tint);
  color: var(--color-blue);
}

.dropbox-notfound {
  background: var(--color-pink-tint);
  color: var(--color-pink);
}

/* Tag Menu */
.tag-menu-container {
  position: relative;
}

.tag-menu-trigger {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  padding: 0;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms;
}

.tag-menu-trigger:hover {
  background: #eee;
  color: #666;
}

.tag-menu-trigger.approved {
  background: var(--color-green);
  color: #fff;
}

.tag-menu-trigger.approved:hover {
  background: var(--color-green);
  opacity: 0.85;
}

.tag-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

.tag-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  margin-top: 0.25em;
  min-width: 200px;
}

.tag-menu .panel-section {
  font-size: 1rem;
  margin: 0.5em 1em 1em 1em;
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  padding: 0.3em 0;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Import Modal */
.modal-import {
  max-width: 900px;
  width: 95%;
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-import .modal-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}

.import-dropbox-icon {
  font-size: 1.8em;
  color: #0061FF;
  margin-top: 0.1em;
}

.import-header-text {
  flex: 1;
  min-width: 0;
}

.import-header-text h2 {
  margin: 0;
}

.import-path-hint {
  font-size: 0.9em;
  color: #999;
  margin-top: 0.15em;
  text-decoration: none;
}

.import-path-hint:hover {
  text-decoration: underline;
  color: #777;
}

.import-body {
  flex: 1;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.import-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.import-folders {
  width: 220px;
  background: #fff;
  border-right: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
}

.import-folders-header {
  padding: 1em 1.2em;
  font-weight: 600;
  border-bottom: 1px solid #e5e5e5;
  color: #666;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.import-folder-tree {
  flex: 1;
  overflow-y: auto;
  padding: 0.5em 0;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 1.2em;
  cursor: pointer;
  color: #555;
  font-size: 0.95em;
}

.folder-item:hover {
  background: #f5f5f7;
}

.folder-item.active {
  background: var(--color-pink-tint);
  color: var(--color-pink);
  font-weight: 500;
}

.folder-item i {
  font-size: 1.1em;
}

.import-files {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.import-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1.2em;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.import-path {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.9em;
  color: #666;
}

.path-root,
.path-segment {
  cursor: pointer;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

.path-root:hover,
.path-segment:hover {
  background: #e5e5e5;
  color: #333;
}

.path-sep {
  color: #aaa;
}

.import-file-list,
.import-file-list,
.import-file-list-simple {
  flex: 1;
  overflow-y: auto;
  padding: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  transition: background 150ms;
}

.import-file-list-simple.drag-over {
  background: #f0f7ff;
  outline: 2px dashed #0061FF;
  outline-offset: -4px;
  border-radius: 4px;
}

.import-upload-status {
  flex: 1;
  font-size: 0.9em;
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 1em;
  background: #fff;
  border-radius: 0.4em;
  cursor: pointer;
  border-left: 3px solid #ddd;
  transition: border-color 0.15s;
}

.file-item:hover {
  border-color: #ddd;
}

.file-item.selected {
  border-color: var(--color-pink);
  background: var(--color-pink-tint);
}

.file-item.selected .file-size,
.file-item.selected .file-date {
  color: var(--color-pink);
}

.file-item.selected .deliverable-tag {
  color: var(--color-pink);
  background: #fff;
}

.file-item.selected .file-section-box {
  border-color: #e6347842;
}

.file-item.folder {
  background: #fafafa;
}

.file-item.folder:hover {
  background: #f0f0f2;
  border-color: transparent;
}

.file-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-pink);
}

.file-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: #f5f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-thumb i {
  font-size: 1.4em;
  color: #888;
}

.file-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  color: #888;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-section-box {
  flex: none;
  margin-left: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.4em;
  padding: 0.3em 0.4em;
}

.file-section-select {
  border: none;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.92em;
  width: 15em;
  cursor: pointer;
}

.file-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  display: flex;
  gap: 1em;
  margin-top: 0.2em;
  font-size: 0.85em;
  color: #888;
}

.file-type {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.8em;
  padding: 0.1em 0.4em;
  background: #e5e5e5;
  border-radius: 3px;
}

.import-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: 3em;
  color: #888;
  text-align: center;
}

.import-empty i {
  font-size: 3em;
  opacity: 0.5;
}

.import-loading {
  padding: 2em;
  text-align: center;
  color: #888;
}

.import-selection {
  display: flex;
  align-items: center;
  gap: 1em;
  color: #666;
  width: 20em;
}

.import-preserve-alpha {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: #666;
  font-size: 0.9em;
  cursor: pointer;
}

/* Import Progress */
.import-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.import-progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  text-align: center;
}

.import-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid #e5e5e5;
  border-top-color: var(--color-pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.import-status {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.import-status strong {
  font-size: 1.1em;
}

.import-current {
  color: #888;
  font-size: 0.9em;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Deliverable Update Badge */
.deliverable-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.5em;
  background: var(--color-orange-tint);
  color: var(--color-orange);
  border-radius: 4px;
  font-size: 0.8em;
  cursor: pointer;
}

.deliverable-update-badge:hover {
  background: var(--color-orange);
  color: white;
}

.deliverable-update-badge i {
  font-size: 0.9em;
}

/* Board back link */

/* ============================================
   DELIVERABLE REVIEW PAGE STYLES
   ============================================ */

/* Layout */
.review-layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f5f6f9;
}

.review-loading,
.review-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 1.1em;
  color: #888;
}

.content:has(.review-container) { margin-left: 0; padding: 0; }
body:has(.review-container) .sidebar { display: none; }

.review-container {
  display: grid;
  grid-template-columns: 380px 1fr;
  height: 100vh;
  background: #39393f;
  padding: 1em;
  gap: 1em;
}

@media (min-width: 1800px) {
  .review-container { grid-template-columns: 500px 1fr; }
}

/* Left Panel - Task Panel */
.review-task-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.5em;
  overflow: hidden;
}

.review-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.2em;
  border-bottom: 1px solid #ddd;
}

.review-panel-header-left {
  display: flex;
  align-items: center;
  gap: 0.8em;
  min-width: 0;
}


.review-close-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 1.2em;
  cursor: pointer;
  padding: 0.2em;
}
.review-close-btn:hover { color: #666; }

.review-panel-filename {
  font-size: 1.4em;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-bottom: 0.4em;
}

/* Toolbar */
.review-panel-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 1em 1.2em 0.4em 1.2em;
  border-bottom: 1px solid #eee;
  background: #e8eaed;
}

.review-panel-toolbar .btn {
  width: 25%;
  box-shadow: none;
  border-bottom: 1px solid #ddd;
}

.review-panel-toolbar .btn.toolbar-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Round Tabs */
.review-round-tabs {
  display: flex;
  gap: 0 0.4em;
  padding: 0.7em 0.7em 0 1.2em;
  background: #E8EAED;
}

.review-round-tab {
  padding: 0.4em 0.6em;
  min-width: calc(12.5% - 0.4em);
  border: none;
  background: rgba(0, 0, 0, 0.07);
  color: #666;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
  border-radius: 0.4em 0.4em 0 0;
}

.review-round-tab:hover {
  background: rgba(0, 0, 0, 0.13);
}

.review-round-tab.active {
  background: var(--color-pink);
  color: #fff;
  font-weight: 600;
}

.review-round-tab.active.approved {
  color: #fff;
  background: var(--color-green);
}

/* Task List */
.review-task-list {
  flex: 1;
  overflow-y: auto;
  padding: 1em 1.5em;
  padding-bottom: 6em;
  scrollbar-width: thin;
}

.review-task-empty {
  padding: 2em;
  text-align: center;
  color: #999;
  font-size: 0.95em;
}

/* Concept tab: brief-section picker + readonly section view */
.review-concept-panel {
  flex: 1;
  overflow-y: auto;
  padding: 2em 1.5em;
  padding-bottom: 6em;
  scrollbar-width: thin;
}

.concept-picker {
  margin-bottom: 2em;
}

.concept-section-menu {
  min-width: 16em;
  max-height: 24em;
  overflow-y: auto;
}

.review-concept-section {
  font-size: 0.92em;
}

.review-concept-section h2 {
  margin: 0 0 0.7em 0;
}

/* Tighter subsection spacing in the Concept view only (scoped, doesn't affect other brief views). */
.review-concept-section .brief-subsection-heading {
  padding: 0.5rem 0;
}

.review-concept-section .brief-subsection-markup {
  padding: 0 !important;
}

/* Task Group */
.review-task-group {
  border-bottom: 1px solid #eee;
}

.review-task-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7em 1.25em;
  background: #fafafa;
  border-bottom: 1px solid #eee;
}

.review-task-group-name {
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
}

.review-task-group-toggle {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 0;
  font-size: 0.8em;
}

/* Task Item */
.review-task-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  padding: .6em 0 .7em 0;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.review-task-item:last-child {
  border-bottom: 0;
}



.review-task-item.status-resolved > .review-task-avatar,
.review-task-item.status-resolved > .review-task-body > .review-task-author,
.review-task-item.status-resolved > .review-task-body > .review-task-description,
.review-task-item.status-resolved > .review-task-body > .review-task-edit,
.review-task-item.status-resolved > .review-task-body > .review-task-images,
.review-task-item.status-ignored > .review-task-avatar,
.review-task-item.status-ignored > .review-task-body > .review-task-author,
.review-task-item.status-ignored > .review-task-body > .review-task-description,
.review-task-item.status-ignored > .review-task-body > .review-task-edit,
.review-task-item.status-ignored > .review-task-body > .review-task-images {
  opacity: 0.4;
}

.review-task-item.status-resolved .review-timestamp-tag,
.review-task-item.status-ignored .review-timestamp-tag {
  filter: grayscale(1);
}

.review-task-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.review-task-avatar.clickable {
  cursor: pointer;
}

.review-task-avatar.clickable:hover {
  opacity: 0.8;
}

.review-task-avatar.status-complete {
  background: #bbb;
}

.review-task-avatar.status-complete i {
  color: #fff;
}

.review-task-avatar.status-ignore {
  background: #fff;
  border: 2px solid #bbb;
}

.review-task-avatar.status-ignore i {
  color: #999;
}

.review-task-avatar.status-approval {
  background: var(--color-purple);
}

.review-task-avatar.status-approval i {
  color: #fff;
}

.task-approval > .review-task-body > .review-task-author {
  display: none;
}

.task-approval > .review-task-body > .review-task-description {
  background: var(--color-purple-tint);
  color: var(--color-purple);
  padding: 0.45em;
  margin: 0 0 0 -0.45em;
}

.task-approval > .review-task-body > .review-task-description:hover {
  background: var(--color-purple-tint);
}

.review-task-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-task-avatar .avatar-initials {
  color: #fff;
  font-size: 0.7em;
  font-weight: 600;
}

.review-task-avatar i {
  color: #fff;
}

.review-task-avatar.small {
  width: 24px;
  height: 24px;
}

.review-task-avatar.small .avatar-initials {
  font-size: 0.55em;
}

.review-task-body {
  flex: 1;
  min-width: 0;
}

.review-task-author {
  font-weight: 600;
  font-size: 0.9em;
  color: #333;
  margin-bottom: 0.2em;
}

.review-task-description {
  font-size: 0.9em;
  color: #555;
  line-height: 1.35;
  word-break: break-word;
  white-space: pre-wrap;
  padding: 0.25em 0.45em;
  margin: -0.25em 0 -0.25em -0.45em;
  border-radius: 0.4em;
}

.review-task-description.editable {
  cursor: text;
}

.review-task-description.editable:hover {
  background: #f4f4f7;
}

.review-task-description.editable:focus {
  background: #fffddd;
  outline: none;
}

.review-task-description.add-task-editable {
  margin-top: 0.3em;
}

.review-task-images {
  display: flex;
  gap: 0.4em;
  margin-top: 0.5em;
  flex-wrap: wrap;
}

.review-task-image-thumb {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.review-task-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Task Replies */
.review-task-replies {
  margin-top: 0.8em;
}

.review-task-reply {
  border-bottom: none;
  border-top: 1px solid #ddd;
}

.review-task-reply:last-child {
  padding-bottom: 0;
}

.review-task-reply-body {
  font-size: 0.85em;
}

.review-task-reply-text {
  color: #555;
}

/* Task Edit */
.review-task-edit {
  margin-top: 0.3em;
}

.review-task-edit-input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.3em;
  padding: 0.5em;
  font-family: inherit;
  font-size: 0.9em;
  resize: vertical;
}

.review-task-edit-input:focus {
  outline: none;
  border-color: var(--color-blue);
}

/* Add Task */
.review-add-task-row {
  margin-top: 1.6em;
  margin-bottom: 2em;
}

.btn-split {
  display: inline-flex;
  position: relative;
}

.btn-split .btn-split-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 0.9em;
}

.btn-split .btn-split-caret {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0.6em;
  padding-right: 0.6em;
}

.btn-split-menu {
  position: absolute;
  top: calc(100% + 0.25em);
  left: 0;
  min-width: 10em;
  z-index: 1001;
}

.btn-split .btn-split-caret i {
  font-weight: 900;
  font-size: 0.8em;
  width: 1.2em;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.btn-split.open .btn-split-caret i {
  transform: rotate(180deg);
}

.btn-split.open .btn-split-caret {
  background-color: #c92d68;
  border-color: #c92d68;
}

.review-task-item.review-task-heading {
  border: 0;
  padding-top: 1.6em;
  padding-bottom: 0.3em;
  align-items: center;
}

.review-heading-text {
  flex: 1;
  margin: 0;
  background: #f0f0f3;
  font-size: 1.1em;
  padding: 0.25em 0.45em;
  border-radius: 0.4em;
  border-bottom: 2px solid #ccc;
  word-break: break-word;
}

.review-heading-text.editable {
  cursor: text;
}

.review-heading-text.editable:hover {
  background: #f4f4f7;
}

.review-heading-text.editable:focus {
  background: #fffddd;
  outline: none;
}

.review-heading-menu-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 0.35em 0.5em;
  font-size: 1em;
  border-radius: 0.3em;
}

.review-heading-menu-btn:hover {
  background: #f4f4f7;
  color: #555;
}

.review-sort-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  padding: 0.9em 1em;
  margin-bottom: 0.5em;
  background: #f0f0f3;
  border-radius: 0.5em;
  cursor: grab;
  user-select: none;
}

.review-sort-card.heading {
  background: #e4e4ea;
  font-weight: 500;
}

.review-sort-card:active {
  cursor: grabbing;
}

.review-sort-card.dragging {
  opacity: 0.4;
}

.review-sort-card.drag-over {
  outline: 2px dashed #c92d68;
  outline-offset: -2px;
}

.review-sort-body {
  flex: 1;
  min-width: 0;
}

.review-sort-body .review-heading-text {
  background: transparent;
  border-bottom: 0;
  padding: 0;
}

.review-container { position: relative; }

.review-task-panel { z-index: 2; position: relative; transition: box-shadow 150ms; }

.review-container:has(.review-comments-panel.open) .review-task-panel {
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.15);
}

.review-comments-panel {
  position: absolute;
  top: 3em;
  bottom: 3em;
  left: 1em;
  width: 380px;
  background: #e8eaed;
  border-radius: 0 0.5em 0.5em 0;
  padding: 1.25em 1.5em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  transform: translateX(0);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.review-comments-panel.open {
  transform: translateX(100%);
  pointer-events: auto;
}

.review-comments-panel .review-round-tabs {
  padding-left: 0;
}

.review-comments-panel > .review-close-btn {
  position: absolute;
  top: 0.5em;
  right: 0.6em;
  font-size: 1.3em;
  z-index: 2;
}

@media (min-width: 1800px) {
  .review-comments-panel { width: 500px; }
}

.review-comments-list {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  padding: 1.5em;
  border-radius: 0 0.4em 0.4em 0.4em;
  scrollbar-width: thin;
}

.review-comment {
  margin-bottom: 1em;
}

.review-comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35em;
}

.review-comment-author {
  font-weight: 500;
  font-size: 0.9em;
}

.review-comment-actions {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.review-comment-action {
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 0.2em;
  font-size: 1em;
}

.review-comment-action:hover:not(:disabled) {
  color: #c92d68;
}

.review-comment-action:disabled {
  cursor: default;
  color: #aaa;
}

.review-comment-action.done {
  color: #888;
}

.review-comment-body {
  border: 1px solid #ddd;
  border-radius: 0.4em;
  padding: 0.7em 0.9em;
  font-size: 0.9em;
  color: #555;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.review-comment.resolved .review-comment-body,
.review-comment.resolved .review-comment-author {
  color: #999;
}

.review-timestamp-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8em;
  color: #666;
  margin-left: 1.8em;
  cursor: pointer;
}

.review-timestamp-tag {
  cursor: pointer;
  margin-left: 0.5em;
  padding: 0.0em 0.4em;
  vertical-align: text-bottom;
}

.review-add-task-inline {
  padding: 0.5em 1.25em;
}

.review-add-task-input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.3em;
  padding: 0.5em;
  font-family: inherit;
  font-size: 0.9em;
  resize: vertical;
}

.review-add-task-input:focus {
  outline: none;
  border-color: var(--color-blue);
}

/* Right Panel - Preview */
.review-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  position: relative;
  z-index: 0;
  position: relative;
}

/* Status Bar */
.review-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 1.5em;
  flex-shrink: 0;
}

.review-status-left {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.review-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 1em;
  border-radius: 2em;
  font-size: 0.85em;
  font-weight: 500;
}

.review-status-pill.status-uptodate {
  background: var(--color-green);
  color: #fff;
}

.review-status-pill.status-approved {
  background: var(--color-green);
  color: #fff;
}

.review-status-pill.status-client {
  background: var(--color-purple);
  color: #fff;
}

.review-status-pill.status-studio {
  background: var(--color-blue);
  color: #fff;
}

.review-status-updated {
  color: var(--color-blue);
}

.review-status-center {
  display: flex;
  align-items: center;
}

.review-counter {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85em;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.25em 0.75em;
  border-radius: 1em;
}

.review-status-right {
  display: flex;
  align-items: center;
}

.review-preview > .review-close-btn {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 10;
  background: none;
  border: none;
  font-size: 1.5em;
  color: #999;
  cursor: pointer;
  padding: 0.2em;
  line-height: 1;
}

.review-preview > .review-close-btn:hover {
  color: #fff;
}

/* Filmstrip */
.review-filmstrip {
  display: flex;
  gap: 0.5em;
  padding: 0.75em 1em;
  overflow-x: auto;
  flex-shrink: 0;
  /* 'safe' keeps the thumbs centred when they fit, but falls back to start (left)
     alignment when they overflow, so the leftmost thumbs stay reachable at scroll 0.
     Plain 'center' would overflow both edges equally, hiding the left ones unreachably. */
  justify-content: safe center;
  background: #ffffff11;
  border-radius: 0.7em;
  scrollbar-width: thin;
}

.review-filmstrip-thumb {
  height: 6em;
  width: auto;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid transparent;
  box-sizing: content-box;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms;
}

.review-filmstrip-thumb:hover {
  opacity: 0.8;
}

.review-filmstrip-thumb.active {
  border-color: var(--color-pink);
  opacity: 1;
}

.review-filmstrip-thumb.active.approved {
  border-color: var(--color-green);
}

.review-filmstrip-thumb img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* When any deliverable in the set is very wide (ratio > 1.5), square off every thumbnail so
   wide ones don't dominate the filmstrip. */
.review-filmstrip.square-thumbs .review-filmstrip-thumb img {
  object-fit: contain;
  aspect-ratio: 1;
  background: #fff2;
}

.review-filmstrip-thumb i {
  color: #999;
  font-size: 1.2em;
  padding: 0 1.5em;
}

/* Preview Area */
.review-preview-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3.5em 2.5em 2.5em 2.5em;
  overflow-y: auto;
}

.review-preview-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.08);
}

.review-preview-video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border: none;
  box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.08);
}

/* HTML banners render at their declared pixel size and are never scaled — an ad is designed for its
   slot, and a resampled one misreads as blurry artwork. The stage takes that exact box; if the
   preview area is smaller, the banner scrolls rather than shrinking. */
.review-html-stage {
  flex-shrink: 0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.08);
}

.review-html-stage.rounded {
  border-radius: 0.7em;
}

/* Visited banners stay mounted so switching back is instant; only the current one is shown. */
.review-html-stage.is-hidden {
  display: none;
}

.review-preview-html {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
}

.review-preview-frame {
  width: 22vw;
  height: 100%;
  border-radius: 0.5em;
  overflow-y: scroll;
  scrollbar-width: none;
  box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.08);
}

.review-preview-frame img,
.review-preview-frame .review-preview-video {
  width: 100%;
  max-height: none;
  display: block;
  box-shadow: none;
  object-fit: unset;
}

.review-ui-box {
  flex-shrink: 0;
  background: #fff;
  padding: 1em 1.2em;
}

.review-ui-content { flex: 1; min-width: 0; }

.review-ui-title {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0 0 0.3em;
  outline: none;
  min-height: 1.2em;
}

.review-ui-title:focus { background: #fffddd; }
.review-ui-title:empty::before { content: attr(data-placeholder); color: #ccc; }

.review-ui-description {
  font-size: .9em;
  color: #888;
  margin: 0;
  outline: none;
  min-height: 1.2em;
}

.review-ui-description:focus { background: #fffddd; }
.review-ui-description:empty::before { content: attr(data-placeholder); color: #ddd; }

.review-ui-furniture { margin-top: 1.7em; font-size: 0.7vw; }
.review-ui-furniture::after { content: ''; display: table; clear: both; }

.dummy-avatar {
  height: 2em;
  position: relative;
  float: left;
  width: 50%;
}
.dummy-avatar:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: #e9e9e9;
}
.dummy-avatar div {
  position: absolute;
  top: 0.4em; left: 3.2em;
}
.dummy-avatar div:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 7em;
  height: 0.6em;
  background: #e9e9e9;
}
.dummy-avatar div:after {
  content: '';
  position: absolute;
  top: 1em; left: 0;
  width: 4em;
  height: 0.6em;
  background: #e9e9e9;
}
.dummy-lozenges {
  height: 2.4em;
  position: relative;
  float: right;
}
.dummy-lozenges:before {
  content: '';
  float: left;
  width: 6em;
  height: 2.4em;
  background: #eee;
  border-radius: 1.2em;
  margin-right: 0.5em;
}
.dummy-lozenges:after {
  content: '';
  float: left;
  width: 6em;
  height: 2.4em;
  background: #ccc;
  border-radius: 1.2em;
}

.review-preview-placeholder {
  font-size: 4em;
  color: #ddd;
}

/* Nav Arrows */
.review-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 150ms;
}

.review-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.3);
}

.review-nav-arrow.prev {
  left: 1em;
}

.review-nav-arrow.next {
  right: 1em;
}

/* Carousel Controls */
.review-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 0.5em 1em;
  flex-shrink: 0;
}

.review-carousel-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  transition: all 150ms;
}

.review-carousel-arrow:hover:not(:disabled) {
  background: #f5f5f5;
  color: #333;
}

.review-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.review-carousel-dots {
  display: flex;
  gap: 0.7em;
  align-items: center;
}

.review-carousel-dot {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
  transition: background 150ms;
}

.review-carousel-dot:not(.active):hover {
  background: rgba(255, 255, 255, 0.5);
}

.review-carousel-dot.active {
  background: #fff;
}

/* Carousel/multipage-PDF stage: the stage carries the slide's aspect ratio (set inline) so its
   box equals the rendered image — the nav arrows and hover-darken shim then sit exactly on the
   image, not on letterbox gutters. The img fills the stage. */
.review-carousel-stage {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.review-carousel-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fallback when the slide has no stored dimensions: let the image size itself. */
.review-carousel-stage.no-ratio { display: inline-block; }
.review-carousel-stage.no-ratio img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
}

.review-carousel-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms linear;
  z-index: 1;
}

.review-carousel-stage:hover::after {
  opacity: 1;
}

/* Match the image's rounded corners (board setting) so the hover shim doesn't square them off. */
.review-carousel-stage.rounded::after {
  border-radius: 0.7em;
}

.review-carousel-nav {
  position: absolute;
  top: calc(50% - 1.5em);
  width: 2em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: #fff;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.review-carousel-nav.prev { left: 0; }
.review-carousel-nav.next { right: 0; }

.review-carousel-counter {
  font-size: 0.8em;
  color: #999;
  min-width: 3em;
  text-align: center;
}

/* Filmstrip carousel badge */
.review-filmstrip-thumb {
  position: relative;
}

.review-filmstrip-carousel-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
}

/* Context Menu */



/* Reply Modal */
.review-reply-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 500;
}

.review-reply-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 0.5em;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 1.5em;
  width: 400px;
  max-width: 90vw;
  z-index: 501;
}

.review-reply-modal h4 {
  margin: 0 0 0.75em 0;
}

/* Screenshot Thumbnails */
.review-screenshot-thumb {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.review-screenshot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-screenshot-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.review-screenshot-thumb:hover .review-screenshot-delete {
  display: flex;
}

/* Lightbox */
.review-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.review-lightbox-content img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

.review-lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  border: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.review-lightbox-close:hover {
  background: #eee;
}

/* A month that has moved since it was invoiced. Neither direction is good news — under-billed or
   over-billed, it needs looking at — so both read as an exception rather than one green one red. */
.report-breakdown .rb-moved { color: var(--color-pink); font-weight: 600; }

/* ---- Reassign projects modal (PM dashboard) ---- */

/* Standard form-group: the label tab sits above a full-width input, as everywhere else. */
.reassign-picker {
  margin-bottom: 1.4em;
}

.reassign-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}

.reassign-check-all {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #555;
  font-size: 0.9em;
  cursor: pointer;
}

/* The list scrolls rather than the modal: the options and buttons below it must stay reachable
   however many projects a PM is holding. */
.reassign-list {
  max-height: 22em;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

/* Top-aligned, not centred: the checkbox belongs to the brand line, and centring it against a
   two-line row leaves it floating between the brand name and the project name beneath. */
.reassign-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9em;
  padding: 0.6em 1em;
  border-bottom: 1px solid #eaebed;
  cursor: pointer;
}

.reassign-row > input[type="checkbox"] {
  margin-top: 0.25em;
  flex-shrink: 0;
}

.reassign-row:last-child { border-bottom: none; }
.reassign-row:hover { background: #f9f9fa; }
.reassign-row.is-selected { background: #f4f6fb; }

.reassign-row-name { flex: 1; min-width: 0; }

.reassign-row-meta {
  display: flex;
  align-items: center;
  gap: 0.8em;
  color: #999;
  font-size: 0.875em;
  white-space: nowrap;
}

.reassign-delegate { color: var(--color-purple); }

.reassign-options {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 1.2em;
}

.reassign-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #333;
  cursor: pointer;
}

.reassign-warnings {
  margin: 1em 0 0;
  padding-left: 0;
  list-style: none;
  color: #555;
}

.reassign-warnings li {
  display: flex;
  gap: 0.6em;
  padding: 0.3em 0;
}

.reassign-warnings i { color: var(--color-orange); }

/* The footer is space-between, so the two actions are grouped to keep them together on the right
   with Cancel on the left. */
.reassign-actions {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-left: auto;
}

/* There is no global .btn:disabled rule, so a disabled pink button looks exactly like a live one
   and reads as "the click did nothing". Make the state visible here. */
.reassign-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.reassign-hint {
  color: #999;
  font-size: 0.875em;
  white-space: nowrap;
  margin-right: 1em;
}

/* Footnote under the breakdown: design projects carrying no costs at all. */
.report-nocost-note {
  margin: 1em 0;
  color: #555;
  /* font-size: 0.9em; */
}

/* Compare Overlay */
.rb-cnc { white-space: normal; min-width: 6em; max-width: 9em; }
.report-breakdown .rb-unbilled { color: var(--color-green); font-weight: 600; }
/* Future-month pre-booked invoices: green, like the unbilled current month. */
.report-breakdown .rb-future { color: var(--color-green); font-weight: 600; }
.rb-invoice-add { display: flex; gap: 0.6em; align-items: center; margin-bottom: 1em; }
.rb-invoice-add .form-input { flex: 1; }
.rb-invoice-list { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: 1.4em; }
.rb-invoice-row { display: flex; align-items: center; gap: 0.6em; color: #333; }
.rb-invoice-remove {
  background: none;
  border: none;
  color: var(--color-pink);
  cursor: pointer;
  font-size: 1em;
  padding: 0;
  line-height: 1;
}

.compare-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: start;
  justify-content: center;
}

.compare-container {
  display: flex;
  flex-direction: column;
  width: 92vw;
  height: 94vh;
  position: relative;
  padding-top: 2em;
}

.compare-panes {
  display: flex;
  gap: 6em;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.compare-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-shrink: 0;
  padding: 1em 0 0.2em;
}

.compare-carousel-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.compare-carousel-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.28);
}

.compare-carousel-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.compare-carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.compare-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.compare-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.55);
}

.compare-carousel-dot.active {
  background: var(--color-pink);
}

.compare-close-btn {
  position: absolute;
  top: 1vw;
  right: -2vw;
  width: 32px;
  height: 32px;
  background: none;
  color: #fff;
  border: none;
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.compare-close-btn:hover {
  opacity: 0.7;
}

.compare-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.compare-round-tabs {
  display: flex;
  gap: 0.4em;
  margin-bottom: 1.5em;
  flex-shrink: 0;
  justify-content: center;
}

.compare-round-tab {
  padding: 0.4em 1em;
  border: none;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

.compare-round-tab:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.compare-round-tab.active {
  background: var(--color-pink);
  color: #fff;
  font-weight: 600;
}

.compare-round-tab.current {
  background: var(--color-blue);
}

.compare-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

.compare-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.compare-video {
  max-width: 100%;
  max-height: 100%;
  border: none;
  overflow: hidden;
}

.compare-video-controls {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4em;
  z-index: 3;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.7em;
  border-radius: 0 0 0.5em 0.5em;
}

.compare-control-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.compare-control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.compare-no-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.1em;
}

.compare-no-preview i {
  font-size: 2.5em;
}

/* Asset Search */
.asset-search-empty {
  color: #999;
  margin-top: 1em;
}

.asset-search-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2em;
  margin-top: 1em;
  margin-bottom: 3em;
}

.asset-search-grid .asset-card {
  border-radius: 0.5em;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.asset-search-grid .asset-card-thumb {
  height: 200px;
  width: 200px;
  margin: auto;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 1em;
}

.asset-search-grid .asset-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.asset-search-grid .asset-card-thumb i {
  font-size: 2em;
  color: #ccc;
}

.asset-search-grid .asset-card-video-icon {
  font-size: 2.5em;
  color: #bbb;
}

.asset-search-grid .asset-card-filename {
  padding: 0 1em;
  font-size: 0.82em;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.asset-search-grid .asset-card-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1em;
  padding: 0.8em 1em;
  margin-top: 0.8em;
  line-height: 1.2;
}

.asset-search-grid .asset-card-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 0.15em;
}

.asset-search-grid .asset-card-brand {
  font-weight: 600;
  font-size: 0.85em;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-search-grid .asset-card-dims {
  font-size: 0.8em;
  color: #888;
}

.asset-search-grid .asset-card-project {
  font-size: 0.8em;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-search-grid .asset-card-channel {
  font-size: 0.8em;
  color: #888;
}

.asset-search-grid .asset-card-date {
  font-size: 0.8em;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Project tile view on /projects/design (reuses .asset-search-grid / .asset-card) */
.project-tile-grid .asset-card-meta {
  margin-top: 0;
  height: 5em;
  justify-content: flex-start;
}

/* Project id text, coloured to match status */
.tile-proj-id { font-weight: 600; font-size: 0.875em; }
.tile-proj-id.discovery { color: var(--color-aqua); }
.tile-proj-id.brief { color: var(--color-blue); }
.tile-proj-id.production { color: var(--color-green); }
.tile-proj-id.completed { color: var(--color-purple); }
.tile-proj-id.testing { color: #c08a2a; }
.tile-proj-id.cancelled { color: #c0506a; }

/* Status lozenge with the tint of its colour */
.asset-search-grid .asset-card-status {
  font-size: 0.75em;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.2em 0.7em;
  border-radius: 1em;
}
.asset-card-status.discovery { color: var(--color-aqua); background: var(--color-aqua-tint); }
.asset-card-status.brief { color: var(--color-blue); background: var(--color-blue-tint); }
.asset-card-status.production { color: var(--color-green); background: var(--color-green-tint); }
.asset-card-status.completed { color: var(--color-purple); background: var(--color-purple-tint); }
.asset-card-status.testing { color: #b6781f; background: #f6ecd9; }
.asset-card-status.cancelled { color: #c0506a; background: #f7e7eb; }

.project-tile-grid .asset-card-thumb img {
  object-fit: contain;
}

/* Logo fallbacks (brand/company) are centred and sized like the board-card logo, not cropped */
.project-tile-grid .asset-card-thumb.is-logo {
  align-items: center;
  padding: 1.2em;
}

.project-tile-grid .asset-card-thumb.is-logo img {
  width: auto;
  height: auto;
  max-width: 6.5em;
  max-height: 4em;
  mix-blend-mode: multiply;
}

/* "Tile view" toggle sat below the Design sidebar nav items */
.secondary-nav li.secondary-nav-tile-toggle {
  margin-top: 1.6em;
}

/* Intake / channel-group landing shell (shared with CreateProject's inline styles) */
.intake-page { max-width: 1200px; margin: 0 auto; padding: 4em 2em; text-align: center; }
.intake-header { display: flex; justify-content: center; align-items: center; gap: 2em; margin-bottom: 4em; }
.intake-logo-ols { height: 60px; width: auto; }
.intake-logo-channel { height: 60px; width: auto; }
.intake-divider { display: inline-block; width: 1px; height: 70px; background: #ccc; }
.intake-heading { font-weight: 400; font-size: 1.8em; color: #555; margin-bottom: 2em; }
.intake-empty { color: #777; }

/* Channel-group landing: work-stream picker tiles (legacy styling) */
.choose-stream {
  margin: 3em auto;
  text-align: center;
}

.choose-stream a {
  display: inline-block;
  width: 15em;
  height: 10em;
  padding: 4em 0;
  margin: 0 1em 2em;
  color: inherit;
  background: #f5f5f7;
  border-radius: 0.6em;
  border-bottom: 0.3em solid #ccc;
  transition: 150ms;
  text-decoration: none;
}

.choose-stream a:hover {
  border-color: var(--color-pink);
}

.choose-stream a:active {
  background: #f3eef4;
}

.choose-stream span {
  font-size: 1.5em;
  line-height: 2rem;
}

@media (max-width: 1400px) {
  .asset-search-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1000px) {
  .asset-search-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Studio Team */
.team-container {
  max-width: 900px;
  margin-top: 3em;
}

.team-container.team-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3em;
}

/* Tighter column gap when the picker is inside a modal (e.g. channel client team) */
.modal-body .team-container.team-columns {
  gap: 0 2em;
}

/* No drag-sort in the modal picker, so no grab cursor */
.modal-body .team-card {
  cursor: default;
}

.team-group-heading {
  margin: 2em 0 0.75em;
}

.team-group-heading:first-of-type {
  margin-top: 0;
}

.team-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 3em;
}

.team-card {
  display: flex;
  align-items: center;
  padding: 0.8em 1em;
  background: white;
  border-bottom: 2px solid #ddd;
  border-radius: 0.5em;
  margin-bottom: 0.5em;
  cursor: grab;
  transition: opacity 150ms;
}

/* Read-only team view (designers): no drag cursor, no approval toggling */
.team-card.readonly { cursor: default; }
.team-card.readonly .team-card-approval { pointer-events: none; cursor: default; }

.team-card.dragging {
  opacity: 0.5;
}

.team-card.drag-over {
  box-shadow: 0 -2px 0 0 var(--color-accent);
}

.team-card-avatar {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 1em;
}

.team-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-avatar .avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue-tint);
  color: var(--color-blue);
  font-weight: 600;
  font-size: 0.85em;
}

.team-card-info {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.team-card-info strong {
  display: block;
}

.team-card-info span {
  display: block;
  color: #999;
  font-size: 0.9em;
}

.team-card-approval {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12em;
  cursor: pointer;
  color: #ccc;
  font-size: 0.85em;
}

.team-card-approval:last-of-type {
  margin-right: 4em;
}

.team-approval-icon {
  font-size: 1.4em;
  font-style: normal;
  display: block;
  height: 1.2em;
  line-height: 1.2em;
}

.team-approval-icon.fal {
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
}

.team-approval-icon.fas {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.team-card-approval span {
}

.team-card-approval.active {
  color: var(--color-pink);
}

.team-card-skills {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
}

.team-card-remove {
  background: none;
  border: none;
  color: #ccc;
  font-size: 1em;
  cursor: pointer;
  padding: 0.3em;
  margin-left: 0.5em;
}

.team-card-remove:hover {
  color: #999;
}

/* Archived Banner */
.archived-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-aqua);
  color: #fff;
  padding: 0.85rem 2rem;
  margin: -2.5rem -2rem 2rem;
  font-weight: 500;
  font-size: 0.9em;
}

.btn-archived-restore { background: var(--color-blue); color: #fff; }

/* Cancelled banner: blue background with an aqua "Undo" button */
.cancelled-banner { background: var(--color-blue); }
.btn-cancelled-undo { background: var(--color-aqua); color: #fff; }

/* Edit Team Modal */
.edit-team-column {
  display: inline-block;
  vertical-align: top;
  min-width: 12em;
  margin: 0 2em 1.5em 0;
}

.edit-team-dept-heading {
  font-size: 1em;
  font-weight: 600;
  margin: 0 0 0.6em;
  color: #555;
}

.edit-team-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.1em 0;
  font-size: 0.9em;
  cursor: pointer;
}

.edit-team-checkbox input[type="checkbox"] {
  accent-color: var(--color-green);
  width: 1em;
  height: 1em;
}

/* Timer */
.nav-timer-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1em 0;
  color: #ccc;
  text-decoration: none;
  font-size: 0.875em;
  line-height: 1;
  border: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}

.nav-timer-link i { font-size: 1.4em; margin-bottom: 0.3em; opacity: 0.6; }
.nav-timer-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-timer-link.timer-running { background: var(--timer-running-gradient); color: #fff; }
.nav-timer-link.timer-running i { opacity: 1; animation: timer-spin 6s linear infinite; }
.nav-timer-link.timer-running-match { background: var(--timer-match-gradient); color: #fff; }
.nav-timer-link.timer-running-match i { opacity: 1; animation: timer-spin 6s linear infinite; }

@keyframes timer-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.nav-timer-wrapper { position: relative; }

.timer-popout {
  display: none;
  position: fixed;
  left: 6.7em;
  background: #fff;
  border-radius: 0.5em;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.15);
  min-width: 280px;
  z-index: 10000;
  overflow: hidden;
}

.nav-timer-wrapper:hover .timer-popout { display: block; }
/* While the popout is open, lift the sidebar's stacking context above .sidebar-secondary
   (z-index:101) so the popout isn't obscured by it. .timer-popout's own z-index is relative to
   this context, so the sidebar itself must out-rank the secondary sidebar. */
.sidebar:has(.nav-timer-wrapper:hover .timer-popout) { overflow: visible; z-index: 102; }

.timer-popout-session {
  padding: 1em 1.2em;
}

.timer-popout-session h4 { margin: 0; font-size: 0.9em; }
.timer-popout-session h4 strong { font-weight: 600; }
.timer-popout-session h5 { margin: 0.15em 0 0; font-size: 0.85em; font-weight: 400; color: #888; }
.timer-popout-time { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5em; font-size: 0.9em; color: #555; }
.timer-popout-time i { margin-right: 0.2em; display: inline-block; transform-origin: center; animation: timer-spin 6s linear infinite; }

.timer-popout-total {
  display: flex;
  justify-content: space-between;
  padding: 0.6em 1.2em;
  background: #f5f5f7;
  font-size: 0.85em;
  color: #666;
  border-top: 1px solid #eee;
}

/* Timer Modal */
.timer-modal { max-width: 680px; }
.timer-modal .form-label { background: var(--color-blue-tint); color: var(--color-blue); }
.timer-modal .modal-header { border-bottom: none; display: flex; justify-content: space-between; align-items: flex-start; }
.timer-modal .modal-header h2 { font-size: 1.3em; margin: 0; }
.timer-today-summary { font-size: 0.9em; margin: 0.3em 0 0; }
.timer-section-heading { font-size: 1.1em; margin: 0 0 1.2em; }
.timer-modal .form-group-inline { margin-bottom: 0.75em; }
.timer-modal .form-group-inline .form-input { min-width: 0; }

/* Keep long project/board names from widening the select past the modal */
.edit-session-modal .form-group-inline .form-input { min-width: 0; }

.timer-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 1em 0 1.5em;
}

.timer-sessions {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
}

.timer-session-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1em;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 0.5em;
  margin-bottom: 0.5em;
}

.timer-session-info { flex: 1; min-width: 0; }
.timer-session-info h4 { margin: 0; font-size: 0.9em; }
.timer-session-info h4 strong { font-weight: 600; }
.timer-session-info h5 { margin: 0.15em 0 0; font-size: 0.85em; font-weight: 400; color: #888; }
.timer-session-id { font-size: 0.9em; font-weight: 500; }
.timer-popout .timer-session-id { margin-left: 0.3em; }
.timer-session-role { color: var(--color-blue); font-size: 0.9em; font-weight: 500; margin-left: 0.3em; }
.timer-session-info .timer-session-role { display: block; margin-left: 0; margin-top: 0.15em; }
.timer-session-link { text-decoration: none; color: inherit; display: block; }

.timer-session-time { font-size: 0.95em; font-weight: 500; white-space: nowrap; min-width: 3em; text-align: right; }
.timer-session-time.timer-running { color: var(--color-green); }
.timer-session-time.timer-running::before {
  display: inline-block;
  content: "\e353";
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  font-size: 0.9em;
  margin-right: 0.3em;
  animation: timer-spin 4s linear infinite;
  transform-origin: center;
}

.timer-session-btn {
  border: 1px solid #d8d8dc;
  border-radius: 2em;
  background: #e8e8ec;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  width: 6em;
  text-align: center;
}
.timer-session-btn:hover { background: #dcdce0; }
.timer-session-btn.timer-btn-stop { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }
.timer-session-btn.timer-btn-stop:hover { background: #2f6fb0; }

.timer-session-delete {
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.1em;
  cursor: pointer;
  padding: 0 0.2em;
}
.timer-session-delete:hover { color: #999; }

.btn-timer-start { width: 100%; border-radius: 2em; }
.btn-timer-start:disabled { opacity: 0.6; cursor: not-allowed; }

/* Asset Explorer */
.asset-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  margin-bottom: 2.5em;
}

.asset-filter-count {
  color: var(--color-pink);
  margin-left: 0.3em;
}

.asset-filter-btn.active {
  background: var(--color-pink);
  color: #fff;
  border-color: var(--color-pink);
  box-shadow: none;
}

.asset-filter-btn.active .asset-filter-count {
  color: inherit;
}

.asset-view-toggle {
  margin-left: auto;
  display: flex;
  gap: 0.3em;
}

.asset-view-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 0.3em;
  padding: 0.3em 0.5em;
  cursor: pointer;
  color: #999;
  font-size: 1em;
}

.asset-view-btn.active {
  color: #333;
  border-color: #999;
}

.asset-section-heading {
  margin-bottom: 1em;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5em;
}

@media (max-width: 1800px) {
  .asset-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1500px) {
  .asset-grid { grid-template-columns: repeat(4, 1fr); }
}

.asset-card {
  background: #EAECF0;
  border-radius: 0.5em;
  overflow: hidden;
  border-bottom: 3px solid #ddd;
}

.asset-thumb {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1em;
  background: #E8EAED;
}

.asset-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: box-shadow 200ms;
}

.asset-thumb img:hover {
  box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.1);
}

.asset-thumb-placeholder {
  font-size: 2em;
  color: #ccc;
}

.asset-card-info {
  padding: 0.7em 0.8em;
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
}

.asset-card-name {
  font-size: 0.9em;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.3em;
}


.asset-card-info i {
  color: #ccc;
  transition: color 200ms;
}

.asset-card-info:hover i {
  color: #0061FF;
}

.asset-card-meta {
  color: #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.asset-card-size {
  font-size: 0.75em;
}

.asset-loading,
.asset-empty {
  padding: 3em;
  text-align: center;
  color: #999;
}

.asset-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.asset-lightbox-close {
  position: absolute;
  top: 1em;
  right: 1em;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5em;
  cursor: pointer;
  opacity: 0.7;
}

.asset-lightbox-close:hover {
  opacity: 1;
}

.asset-lightbox-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  cursor: default;
}

.asset-lightbox-content img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.5);
}

.asset-lightbox-spinner {
  font-size: 2em;
}

.asset-lightbox-spinner i {
  background: linear-gradient(135deg, var(--color-pink), #8B5CF6, var(--color-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.asset-lightbox-video {
  max-width: 90vw;
  max-height: 80vh;
}

.asset-lightbox-info {
  color: #ccc;
  padding: 1em 0 2.5em 0;
  text-align: center;
  flex-shrink: 0;
}

.sticky-headers {
  overflow: visible;
}

.sticky-headers thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.check-cell {
  cursor: pointer;
  transition: background-color 100ms;
}

.check-cell:hover {
  background: #EAECF0;
}

.check-cell input[type="checkbox"] {
  pointer-events: none;
}



/* Brief save status ------------------------------------------------------- */
/* Autosave feedback for the brief editor. People coming from Google Docs assume their work is
   saved, so the quiet states stay quiet and only a genuine failure is loud. */
.brief-save-status {
  position: sticky;
  top: 0;
  z-index: 5;
  float: right;
  margin: 0 0 -24px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 16px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.brief-save-status.brief-save-saving,
.brief-save-status.brief-save-saved {
  opacity: 1;
  color: #888;
  background: #f2f2f2;
}

.brief-save-status.brief-save-saved {
  color: var(--color-green);
  background: var(--color-green-tint);
}

/* Failure and conflict must not be missable - these are the states where the user's next
   keystrokes are at risk. */
.brief-save-status.brief-save-error,
.brief-save-status.brief-save-conflict {
  opacity: 1;
  color: #fff;
  background: #dc3545;
  animation: pulse 1.5s infinite;
}

.brief-save-status.brief-save-conflict {
  background: var(--color-orange);
}

.brief-conflict-warning {
  margin: 6px 0 2px;
  padding: 6px 10px;
  border-left: 3px solid var(--color-orange);
  background: var(--color-orange-tint);
  color: #8a4b00;
  font-size: 13px;
}

.brief-draft-restore {
  margin: 6px 0 2px;
  padding: 6px 10px;
  border-left: 3px solid var(--color-orange);
  background: var(--color-orange-tint);
  color: #8a4b00;
  font-size: 13px;
}

.brief-draft-btn {
  margin-left: 8px;
  padding: 2px 10px;
  border: 1px solid #d3a86a;
  border-radius: 10px;
  background: #fff;
  color: #8a4b00;
  font-size: 12px;
  cursor: pointer;
}

.brief-draft-btn:hover {
  background: #fff8ef;
}


/* Circuit connection banners ---------------------------------------------- */
/* Rewords Blazor's default reconnect overlay, which otherwise freezes the page without saying that
   unsaved work is at risk. Hidden until Blazor raises a reconnect state change. */
#components-reconnect-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--color-orange);
  color: #fff;
  font-size: 14px;
  text-align: center;
}

#components-reconnect-modal.circuit-visible {
  display: block;
}

#components-reconnect-modal.circuit-gone {
  background: #dc3545;
}

/* Show one message or the other, never both. */
#components-reconnect-modal .circuit-msg-gone,
#components-reconnect-modal.circuit-gone .circuit-msg-retrying {
  display: none;
}

#components-reconnect-modal.circuit-gone .circuit-msg-gone {
  display: inline;
}

#components-reconnect-modal button {
  margin-left: 12px;
  padding: 3px 12px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

#components-reconnect-modal button:hover {
  background: rgba(255, 255, 255, .15);
}


/* --------------------------------------------------------- Poster frame picker */

.poster-pick-modal {
  /* Wide enough for the 600px stage plus the modal body padding, and taller than the shared 85vh
     so the square stage fits a laptop screen without the body scrolling */
  width: auto;
  max-width: min(92vw, 700px);
  max-height: 95vh;
}

.poster-pick-lead {
  margin: 0 0 1.2em;
  color: #666;
  text-align: center;
}

/* Square stage: portrait and landscape deliverables both sit centred in the same box, so the modal
   is the same size whatever is being posterised */
.poster-pick-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 600px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}

.poster-pick-stage video {
  max-width: 100%;
  max-height: 100%;
  outline: none;
}

/* Tighter than the shared padding so the 600px stage still fits a laptop screen without scrolling */
.poster-pick-modal .modal-body {
  padding: 1.5em 2em;
}

.poster-pick-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Set sits on the left, with the running timecode opposite it */
.poster-pick-footer .btn-primary {
  margin-left: 0;
}

.poster-pick-seconds {
  font-size: 0.95em;
  color: #666;
  font-variant-numeric: tabular-nums;
}

/* Video lightbox: Fancybox wraps HTML content in a padded white card, while images and PDFs open
   flush. Both selectors do the same job — mainClass is what we pass, :has covers any other HTML
   slide that ends up holding a video. */
.fancybox-video .fancybox__content,
.fancybox__content:has(> video) {
  padding: 0;
  background: transparent;
}

/* ---------------------------------------------------- Billing snapshots */

/* A month's total runs to six figures, which won't sit in the stat box's fixed 9em */
.snapshot-stats .stat-box {
  width: auto;
  min-width: 9em;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.variance-head {
  display: flex;
  align-items: baseline;
  gap: 1em;
  margin-top: 2em;
}

.variance-head h2 {
  margin: 0;
}

.variance-total {
  font-weight: 600;
}

.variance-total.is-up,
.data-table td.is-up {
  color: var(--color-green);
}

.variance-total.is-down,
.data-table td.is-down {
  color: var(--color-pink);
}

/* Money and quantities line up on the decimal, which is the only way a variance reads quickly */
.data-table th.num,
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ok-note {
  color: var(--color-green);
  margin-top: 2em;
}