/* 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;
}

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

.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.82em;
  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;
  /* 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%);
  z-index: 10;
  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: 1em 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 {
  justify-content: center;
  padding: 0 1em 1em;
}

.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;
}

.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;
}

.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;
}

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

.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;
}

.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;
}

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

.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 {
  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;
}

.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);
}

/* 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);
}

.data-table .name-with-sub {
  font-weight: 600;
}

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

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

.data-table .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.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;
}

.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);
}

.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;
}

.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.4em;
  margin-bottom: 1.6em;
  padding: 0.7em 1.2em;
}

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

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

.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;
}

/* ===== 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-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;
  flex-direction: column;
  gap: 0;
}

.manage-tab-drag .btn-link {
  font-size: 0.8em;
  color: #ccc;
  line-height: 1;
}

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

.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;
}

.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;
}

.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;
}

.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;
}

/* 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;
  padding: 0.3em 0.9rem;
  border-radius: 0;
}

.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: 1rem 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.8rem;
  color: #667085;
  margin-bottom: 0.3em;
}

.stat-value {
  font-size: 1.5rem;
  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-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);
}

/* 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;
  max-height: calc(100vh - 20em);
  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;
  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.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;
}

.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-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-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: 1em;
  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-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.5;
  padding: 0.3em 0;
  outline: none;
  cursor: text;
}

.intro-textarea:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
}

/* 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: 640px;
  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-simple {
  flex: 1;
  overflow-y: auto;
  padding: 1em;
  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: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  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.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-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;
}

/* 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;
}

/* 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: 1em 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.1em;
  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;
  justify-content: 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);
}

.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;
}

/* Compare Overlay */
.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;
  gap: 6em;
  width: 92vw;
  height: 94vh;
  position: relative;
  padding-top: 2em;
}

.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; }
.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: 1em;
  padding: 0 0.9em;
}

/* 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; }
.sidebar:has(.nav-timer-wrapper:hover .timer-popout) { overflow: visible; }

.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;
}