/* ============================================================
   Lux Bench — bench.css
   Additive styles layered on lux.css tokens: generic empty/error
   states, toast, auth card, modal dialogs, the task board, chat
   panel, remote-desktop frame, and admin tables. Loaded AFTER
   lux.css. On-brand: fine #ececec borders, serif italic <em>
   headings, mono details, uppercase letter-spaced labels,
   restrained 150–300ms motion. Does not redefine lux.css.
   ============================================================ */

/* ---------- Generic empty / error / loading ---------- */
.lux-empty {
  border: 1px dashed #e2e2e2;
  background: #fff;
  padding: 40px 28px;
  text-align: center;
  color: #7a7a7a;
}
.lux-empty-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  color: #0a0a0a;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.lux-empty-body {
  font-size: 13px;
  color: #7a7a7a;
  max-width: 48ch;
  margin: 0 auto;
}
.lux-error-state {
  border-color: #e6c4b8;
}

/* ---------- Toast ---------- */
.lux-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0a0a0a;
  color: #fff;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.06em;
  z-index: 300;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
}
.lux-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Auth (login) ---------- */
.auth-wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid #ececec;
  padding: 36px 34px;
}
.auth-card .auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.auth-card .auth-logo img {
  height: 46px;
  width: auto;
}
.auth-card h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.015em;
  text-align: center;
  margin-bottom: 6px;
}
.auth-card h1 em {
  font-style: italic;
  font-weight: 500;
}
.auth-card .auth-sub {
  text-align: center;
  color: #7a7a7a;
  font-size: 13px;
  margin-bottom: 24px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.auth-field label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a7a7a;
}
.auth-field input {
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
}
.auth-field input:focus {
  outline: 0;
  border-color: #0a0a0a;
}
.auth-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.auth-msg {
  font-size: 12px;
  padding: 8px 12px;
  margin-bottom: 14px;
  border: 1px solid #e6c4b8;
  color: #b03a2a;
  background: #fdf6f3;
}
.auth-ok {
  font-size: 12.5px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid #cfe3d4;
  color: #2a6a3a;
  background: #f4faf5;
  line-height: 1.5;
}

/* Admin sign-in (collapsible) */
.auth-admin {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #f1f1f1;
  text-align: center;
}
.auth-collapse-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a9a9a;
  padding: 0;
  transition: color 0.15s;
}
.auth-collapse-toggle:hover {
  color: #0a0a0a;
}
.auth-admin-form {
  margin-top: 16px;
  text-align: left;
}
.auth-admin-form .btn {
  margin-top: 8px;
}

/* ---------- Modal (dialogs) ---------- */
.lux-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: saturate(120%) blur(3px);
  -webkit-backdrop-filter: saturate(120%) blur(3px);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.lux-modal-backdrop.show {
  opacity: 1;
}
.lux-modal {
  width: 100%;
  max-width: 440px;
  margin-top: 12vh;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 24px 60px -28px rgba(15, 15, 15, 0.45);
  padding: 30px 30px 26px;
  transform: translateY(-8px) scale(0.985);
  transition: transform 0.16s ease;
}
.lux-modal-backdrop.show .lux-modal {
  transform: translateY(0) scale(1);
}
.lux-modal h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.lux-modal h2 em {
  font-style: italic;
  font-weight: 500;
}
.lux-modal .modal-sub {
  color: #7a7a7a;
  font-size: 13px;
  margin-bottom: 22px;
}
.lux-modal .modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.lux-modal .modal-field label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a7a7a;
}
.lux-modal .modal-field input,
.lux-modal .modal-field textarea,
.lux-modal .modal-field select {
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
}
.lux-modal .modal-field textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}
.lux-modal .modal-field input:focus,
.lux-modal .modal-field textarea:focus,
.lux-modal .modal-field select:focus {
  outline: 0;
  border-color: #0a0a0a;
}
.modal-msg {
  font-size: 12px;
  padding: 8px 12px;
  border: 1px solid #e6c4b8;
  color: #b03a2a;
  background: #fdf6f3;
}
.lux-modal .modal-msg {
  margin-top: 12px;
}
.lux-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.lux-modal .modal-actions .btn {
  min-width: 96px;
  justify-content: center;
}

/* ---------- Task board (teammate) ---------- */
.board-host {
  margin-bottom: 32px;
}
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.board-col {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #ececec;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f1f1;
}
.board-col-title {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a5a5a;
  font-weight: 500;
}
.board-col-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9a9a9a;
  border: 1px solid #ececec;
  padding: 1px 7px;
}
.board-col-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.board-col-empty {
  font-size: 12px;
  color: #b0b0b0;
  padding: 8px 4px;
  text-align: center;
}

.task-card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ececec;
  padding: 14px 15px;
  font: inherit;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.task-card:hover {
  border-color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -14px rgba(15, 15, 15, 0.5);
}
.task-card-title {
  font-size: 13.5px;
  font-weight: 500;
  color: #0a0a0a;
  line-height: 1.4;
  margin-bottom: 6px;
}
.task-card-due {
  font-size: 11px;
  color: #b07a2a;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.task-card-meta {
  display: flex;
  gap: 8px;
}
.task-meta-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #7a7a7a;
}

/* ---------- Task detail (overlay panel) ---------- */
.task-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: saturate(120%) blur(3px);
  -webkit-backdrop-filter: saturate(120%) blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.task-detail-backdrop.show {
  opacity: 1;
}
.task-detail {
  width: min(560px, 100%);
  height: 100%;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid #ececec;
  padding: 30px 32px 48px;
  transform: translateX(24px);
  transition: transform 0.18s ease;
}
.task-detail-backdrop.show .task-detail {
  transform: translateX(0);
}
.task-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.task-detail-headmain h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.task-detail-due {
  font-size: 12px;
  color: #b07a2a;
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.task-detail-close {
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #9a9a9a;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
  flex: none;
}
.task-detail-close:hover {
  color: #0a0a0a;
}
.task-detail-statusrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.task-status-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a7a7a;
}
.task-status-select {
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.task-status-select:focus {
  outline: 0;
  border-color: #0a0a0a;
}

.task-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #f1f1f1;
}
.task-section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a7a7a;
  margin-bottom: 12px;
}
.task-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: #2a2a2a;
  white-space: pre-wrap;
}
.task-body.muted {
  color: #9a9a9a;
}

/* Attachments */
.att-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.att-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #ececec;
  padding: 9px 12px;
  text-decoration: none;
  color: #0a0a0a;
  transition: border-color 0.15s;
}
.att-item:hover {
  border-color: #0a0a0a;
}
.att-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.att-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #7a7a7a;
  flex: none;
}
.att-upload {
  margin-top: 4px;
}

/* Comments */
.cmt-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.cmt {
  border-left: 2px solid #ececec;
  padding: 2px 0 2px 14px;
}
.cmt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.cmt-author {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0a0a0a;
  font-weight: 500;
}
.cmt-time {
  font-size: 11px;
  color: #9a9a9a;
}
.cmt-body {
  font-size: 13px;
  line-height: 1.55;
  color: #2a2a2a;
  white-space: pre-wrap;
}
.cmt-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmt-input {
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}
.cmt-input:focus {
  outline: 0;
  border-color: #0a0a0a;
}
.cmt-form-actions {
  display: flex;
  justify-content: flex-end;
}

/* ---------- Chat ---------- */
.chat-panel {
  border: 1px solid #ececec;
  background: #fff;
  height: calc(100vh - 260px);
  min-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-mount {
  flex: 1;
  min-height: 0;
  display: flex;
}
.chat-mount converse-root {
  flex: 1;
  min-height: 0;
  display: flex;
  width: 100%;
}

/* ---- Converse.js theming -------------------------------------------------
   Converse renders in LIGHT DOM here (no shadow root), so plain bench.css rules
   reach its elements. The shipped client defaults to the DRACULA theme, which
   defines its whole palette on `converse-bg[data-bs-theme=dracula]` (dark navy
   #282a36 surfaces; GREEN --chat-color, ORANGE --muc-color, PURPLE/PINK
   --controlbox-color/--secondary-color/--focus-color accents). There is no
   built-in "lux" theme, so we re-map every Converse colour variable onto the
   Lux palette and back it up with targeted element overrides.

   Lux palette: #fafafa page · #fff panels · #0a0a0a ink · #3a3a3a / #6a6a6a /
   #9a9a9a text · #d8613c accent (hover #b34e2d) · #ececec lines · #f1f1f1
   highlight · Inter UI · 2px radii.

   Everything is scoped under .chat-mount so the rest of the app is untouched.

   (a) VARIABLE OVERRIDES — set on several robust, high-specificity selectors so
   we beat Converse's `converse-bg[data-bs-theme=dracula]` rule wherever the
   attribute lands. We override BOTH the base palette vars (so any leftover
   green/orange/purple reference resolves to Lux ink/accent) AND the semantic
   tokens that the components actually read. */
.chat-mount .conversejs,
.chat-mount converse-root,
.chat-mount .conversejs[class],
.chat-mount converse-bg[data-bs-theme] {
  /* Base palette — neutralise so derived accents can never show the old hues */
  --green: #d8613c;
  --green-rgb: 216, 97, 60;
  --green-1: #d8613c;
  --green-2: #d8613c;
  --green-3: #b34e2d;
  --green-4: #b34e2d;
  --orange: #d8613c;
  --orange-rgb: 216, 97, 60;
  --orange-darker: #b34e2d;
  --redder-orange: #b34e2d;
  --purple: #0a0a0a;
  --purple-rgb: 10, 10, 10;
  --pink: #d8613c;
  --pink-rgb: 216, 97, 60;
  --cyan: #d8613c;
  --blue: #0a0a0a;
  --blue-1: #d8613c;
  --blue-2: #6a6a6a;
  --gray: #9a9a9a;
  --darkgray: #0a0a0a;
  --red: #b3261e;
  --red-rgb: 179, 38, 30;
  --yellow: #d8613c;

  /* Surfaces + text */
  --background-color: #ffffff;
  --background-color-rgb: 255, 255, 255;
  --background-color-lighter: #fafafa;
  --global-background-color: #fafafa;
  --foreground-color: #0a0a0a;
  --text-color: #0a0a0a;
  --message-text-color: #0a0a0a;
  --selection-color: #0a0a0a;
  --subdued-color: #9a9a9a;
  --disabled-color: #9a9a9a;

  /* Brand / actions: primary = near-black (Lux .btn-primary); accent = terracotta */
  --primary-color: #0a0a0a !important;
  --primary-rgb: 10, 10, 10;
  --primary-color-hover: #3a3a3a !important;
  --secondary-color: #6a6a6a !important;
  --secondary-rgb: 106, 106, 106;
  --secondary-color-dark: #3a3a3a;
  --secondary-color-hover: #3a3a3a;
  --converse-secondary-color: #6a6a6a;

  /* Accent-driven affordances: links, send button, focus, online dot */
  --link-color: #d8613c;
  --link-color-hover: #b34e2d;
  --chat-color: #d8613c;
  --chat-rgb: 216, 97, 60;
  --chat-color-hover: #b34e2d;
  --muc-color: #d8613c;
  --muc-rgb: 216, 97, 60;
  --muc-color-hover: #b34e2d;
  --focus-color: #d8613c;
  --highlight-color: #f1f1f1;
  --highlight-color-hover: #ececec;
  --converse-highlight-color: #f1f1f1 !important;
  --controlbox-color: #d8613c;
  --headlines-color: #d8613c;
  --chat-status-online: #d8613c;

  /* Headings: "GROUPCHATS"/"CONTACTS" section labels = muted uppercase.
     --heading-color is what the --contacts variant resolves to;
     --controlbox-heading-color drives the plain controlbox heading. */
  --heading-color: #9a9a9a;
  --controlbox-heading-color: #9a9a9a;
  --brand-heading-color: #0a0a0a;

  /* Conversation + controlbox header bars = near-black like the active nav item */
  --chat-header-bg-color: #0a0a0a;
  --chat-header-fg-color: #ffffff;
  --muc-header-bg-color: #0a0a0a;
  --muc-header-fg-color: #ffffff;

  /* Status / feedback colours */
  --error-color: #b3261e;
  --warning-color: #d8613c;
  --info-color: #6a6a6a;
  --success-color: #0a0a0a;

  /* Typography + restrained radii */
  --heading-font: 'Inter', system-ui, -apple-system, sans-serif;
  --converse-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --branding-font: 'Cormorant Garamond', Georgia, serif;
  --font-size: 14px;
  --chatbox-border-radius: 2px;

  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

/* (b) ELEMENT OVERRIDES — belt-and-suspenders for any element that uses a
   hard-coded colour or a var we did not catch. All scoped under .chat-mount. */

/* Panels / chat content / controlbox surface = white */
.chat-mount .conversejs,
.chat-mount .conversejs .chatbox,
.chat-mount .conversejs .chat-content,
.chat-mount .conversejs #controlbox,
.chat-mount .conversejs .controlbox-pane,
.chat-mount .conversejs .chatroom-body {
  background-color: #ffffff !important;
  color: #0a0a0a;
}

/* Roster / contacts sidebar = page surface */
.chat-mount .conversejs #converse-roster,
.chat-mount .conversejs .controlbox-section {
  background-color: #fafafa !important;
}

/* Section group headers ("CONTACTS" / "GROUPCHATS") = muted, uppercase, tracked.
   Kills the green/orange/purple. */
.chat-mount .conversejs .controlbox-heading,
.chat-mount .conversejs .controlbox-heading--contacts,
.chat-mount .conversejs .controlbox-heading--groupchats,
.chat-mount .conversejs .controlbox-heading--headline,
.chat-mount .conversejs .group-toggle {
  color: #9a9a9a !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78em !important;
}
.chat-mount .conversejs .group-toggle .fa {
  color: #9a9a9a !important;
}

/* Links + online status dot = terracotta */
.chat-mount .conversejs a,
.chat-mount .conversejs .chatbox-title a {
  color: #d8613c;
}
.chat-mount .conversejs a:hover {
  color: #b34e2d;
}
.chat-mount .conversejs .chat-status--online,
.chat-mount .conversejs converse-icon.chat-status--online {
  color: #d8613c !important;
  fill: #d8613c !important;
}

/* Conversation header bar = near-black with white text + accent underline */
.chat-mount .conversejs .chatbox .chat-head.chat-head-chatbox,
.chat-mount .conversejs .chatbox .chat-head.chat-head-chatroom {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border-bottom: 0.12em solid #d8613c !important;
}
.chat-mount .conversejs .chat-head .chatbox-title,
.chat-mount .conversejs .chat-head .chatbox-title__text,
.chat-mount .conversejs .chat-head .user-custom-message,
.chat-mount .conversejs .chat-head a,
.chat-mount .conversejs .chat-head converse-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Message form: divider above input + textarea focus accent. Kills green line. */
.chat-mount .conversejs .bottom-panel,
.chat-mount .conversejs .chat-message-form {
  border-top: 1px solid #ececec !important;
  background-color: #ffffff !important;
}
.chat-mount .conversejs .chat-textarea {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
}
.chat-mount .conversejs .chat-textarea:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 0 #d8613c;
}

/* "Message" placeholder = muted (kills purple) */
.chat-mount .conversejs ::placeholder,
.chat-mount .conversejs .chat-textarea::placeholder {
  color: #9a9a9a !important;
  opacity: 1;
}

/* Selected / active / hovered contact = subtle grey, dark text (kills purple) */
.chat-mount .conversejs .list-item.open,
.chat-mount .conversejs .list-item.active,
.chat-mount .conversejs .roster-group-contacts .list-item:hover {
  background-color: #f1f1f1 !important;
}
.chat-mount .conversejs .list-item.open a,
.chat-mount .conversejs .list-item.active a,
.chat-mount .conversejs .roster-group-contacts .list-item .list-item-link {
  color: #0a0a0a !important;
}

/* Buttons = Lux look: primary near-black, send affordance terracotta */
.chat-mount .conversejs .btn-primary,
.chat-mount .conversejs button.btn-primary {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
  border-radius: 2px;
}
.chat-mount .conversejs .btn-primary:hover {
  background-color: #3a3a3a !important;
  border-color: #3a3a3a !important;
}
.chat-mount .conversejs .chat-content-sendbutton,
.chat-mount .conversejs converse-message-actions .chat-msg__action {
  color: #d8613c !important;
  fill: #d8613c !important;
}
.chat-panel .lux-empty {
  margin: auto;
  border: 0;
}

/* Connection details disclosure (other XMPP clients). */
.chat-details {
  margin-top: 16px;
}
.conn-panel {
  border: 1px solid #ececec;
  background: #fff;
}
.conn-summary {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.conn-summary:hover {
  background: #fafafa;
}
.conn-body {
  padding: 4px 16px 16px;
  border-top: 1px solid #ececec;
}
.conn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.conn-label {
  min-width: 84px;
  color: #777;
  font-size: 13px;
}
.conn-value {
  flex: 1;
  min-width: 160px;
  word-break: break-all;
}
.conn-note {
  margin: 10px 0 0;
  color: #777;
  font-size: 13px;
}

/* ---------- Remote desktop ---------- */
.desktop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #ececec;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.6);
}
.desktop-toolbar-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a7a7a;
}
.desktop-toolbar-actions {
  display: flex;
  gap: 10px;
}
.desktop-frame {
  position: relative;
  border: 1px solid #ececec;
  background: #0a0a0a;
  height: calc(100vh - 300px);
  min-height: 520px;
  overflow: hidden;
}
.desktop-frame:fullscreen {
  height: 100vh;
  min-height: 0;
  border: 0;
}
.desktop-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.desktop-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fafafa;
  padding: 40px 28px;
}
.desktop-fallback[hidden] {
  display: none;
}
.desktop-fallback-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  color: #0a0a0a;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.desktop-fallback-body {
  font-size: 13px;
  color: #5a5a5a;
  max-width: 46ch;
  line-height: 1.6;
}

/* ---------- Admin console ---------- */
.admin-section {
  margin-bottom: 24px;
}
.cell-strong {
  font-size: 13.5px;
  font-weight: 500;
  color: #0a0a0a;
}
.cell-sub {
  font-size: 11.5px;
  color: #7a7a7a;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.row-action {
  background: transparent;
  border: 1px solid #e2e2e2;
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3a3a3a;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.row-action:hover {
  border-color: #0a0a0a;
  color: #0a0a0a;
}
.row-action-danger {
  color: #b03a2a;
  border-color: #e6c4b8;
}
.row-action-danger:hover {
  border-color: #b03a2a;
  color: #b03a2a;
}

.admin-tm-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-fl-select {
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: #0a0a0a;
  cursor: pointer;
  min-width: 240px;
}
.admin-fl-select:focus {
  outline: 0;
  border-color: #0a0a0a;
}
.admin-task-list {
  margin-top: 4px;
}

/* ---------- Admin task grid (full-bleed, own tab) ---------- */
.grid-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  z-index: 5;
}
.grid-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid #ececec;
}
.grid-topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.grid-topbar-brand img {
  display: block;
}
.grid-topbar-title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a5a5a;
}
.grid-back {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
  text-decoration: none;
}
.grid-back:hover {
  color: #d8613c;
}
.grid-mount {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.grid-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #ececec;
}
.grid-toolbar-spacer {
  flex: 1 1 auto;
}
.grid-search {
  flex: 0 1 280px;
  border: 1px solid #e2e2e2;
  background: #fafafa;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  color: #0a0a0a;
}
.grid-search:focus {
  outline: 0;
  border-color: #d8613c;
  background: #fff;
}
.grid-filter {
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: #0a0a0a;
  cursor: pointer;
}
.grid-filter:focus {
  outline: 0;
  border-color: #0a0a0a;
}
.grid-count {
  font-size: 12px;
  color: #9a9a9a;
  white-space: nowrap;
}

.grid-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

/* Dense data table */
.dtable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
  background: #fff;
}
.dtable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f6f6;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
  padding: 9px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a6a6a;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.dtable thead th.dt-sorted {
  color: #d8613c;
}
.dtable thead th.dt-num {
  text-align: right;
}
.dtable thead th.dt-actions {
  cursor: default;
}
.dtable tbody td {
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
  padding: 0;
  height: 34px;
  vertical-align: middle;
  background: #fff;
}
.dt-row:hover td {
  background: #f8f8f8;
}
.dt-cell {
  padding: 0 4px;
}
.dt-cell.dt-date {
  padding: 0 12px;
  color: #5a5a5a;
  white-space: nowrap;
}
.dt-cell.dt-num {
  padding: 0 12px;
  text-align: right;
  color: #5a5a5a;
}
.dt-cell.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.dt-cell.dt-actions {
  padding: 0;
  text-align: center;
  width: 36px;
}

/* Inline editors blend into the cell until focused. */
.dt-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: #0a0a0a;
  padding: 6px 8px;
  height: 32px;
}
.dt-input:focus {
  outline: 0;
  border-color: #d8613c;
  background: #fff;
}
select.dt-input {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dt-title-input {
  font-weight: 500;
}
.dt-due {
  color: #5a5a5a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* Status select tinted like a chip when not focused. */
.dt-status {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.dt-status-todo {
  color: #5a5a5a;
}
.dt-status-doing {
  color: #d8613c;
}
.dt-status-done {
  color: #2a6a3a;
}
.dt-status:focus {
  color: #0a0a0a;
}

.dt-del {
  border: 0;
  background: none;
  color: #c9c9c9;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 8px;
  line-height: 1;
}
.dt-del:hover {
  color: #b03a2a;
}

/* ---------- Teammate clock widget (top bar) ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.top-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.clock-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #ececec;
  background: #fff;
  padding: 7px 10px 7px 14px;
}
.clock-widget.clocked-in {
  border-color: #e6c4b8;
  background: #fdf6f3;
}
.clock-state {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.clock-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.clock-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  color: #b34e2d;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.clock-meta {
  display: flex;
  align-items: center;
  gap: 7px;
}
.clock-meta .clock-label {
  color: #b34e2d;
}
.clock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8613c;
  box-shadow: 0 0 0 0 rgba(216, 97, 60, 0.5);
  animation: clock-pulse 1.8s ease-out infinite;
  flex: none;
}
@keyframes clock-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(216, 97, 60, 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(216, 97, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(216, 97, 60, 0);
  }
}
.clock-task {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: #5a5a5a;
}
.clock-task-select {
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
  color: #0a0a0a;
  cursor: pointer;
  max-width: 170px;
}
.clock-task-select:focus {
  outline: 0;
  border-color: #0a0a0a;
}
.clock-btn {
  padding: 7px 14px;
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- Admin time view (#time) ---------- */
.time-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.time-filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.time-filter-spacer {
  flex: 1 1 auto;
}
.time-filter-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a7a7a;
}
.time-date {
  border: 1px solid #e2e2e2;
  background: #fff;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: #0a0a0a;
}
.time-date:focus {
  outline: 0;
  border-color: #0a0a0a;
}
.time-export {
  text-decoration: none;
}
.time-table-host {
  margin-top: 4px;
}
.time-table td.mono,
.time-dur {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #3a3a3a;
}
.time-dur {
  font-weight: 500;
  color: #0a0a0a;
}
.time-sync {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.time-sync.ok {
  color: #2a6a3a;
}
.time-sync.no {
  color: #b03a2a;
}
.time-sync.muted {
  color: #b0b0b0;
}
.time-sync-cell {
  text-align: center;
}
.time-note {
  font-size: 12.5px;
  color: #3a3a3a;
}
.time-summary {
  margin-top: 18px;
  margin-left: auto;
  max-width: 320px;
  border: 1px solid #ececec;
  background: #fff;
}
.time-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px;
  border-bottom: 1px solid #f1f1f1;
}
.time-summary-row:last-child {
  border-bottom: 0;
}
.time-summary-name {
  font-size: 12.5px;
  color: #5a5a5a;
}
.time-summary-val {
  font-size: 12.5px;
  font-weight: 500;
  color: #0a0a0a;
}
.time-summary-total {
  background: #fafafa;
}
.time-summary-total .time-summary-name {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0a0a0a;
  font-weight: 600;
}
.time-summary-total .time-summary-val {
  font-size: 14px;
  color: #b34e2d;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .board {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 780px) {
  .task-detail {
    width: 100%;
    border-left: 0;
  }
  .chat-panel,
  .desktop-frame {
    height: calc(100vh - 220px);
  }
  .admin-fl-select {
    min-width: 0;
    width: 100%;
  }
  .admin-tm-controls {
    width: 100%;
  }
  .clock-task,
  .clock-task-select {
    max-width: 110px;
  }
  .time-filter,
  .time-date,
  .admin-fl-select {
    flex: 1 1 140px;
  }
  .time-summary {
    max-width: none;
  }
}

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