/* Global WPA workspace refinements */
:root {
  --wi-space-1: 6px;
  --wi-space-2: 10px;
  --wi-space-3: 14px;
  --wi-space-4: 18px;
  --wi-space-5: 24px;
}

.brand .brand-logo.dark {
  display: none !important;
}

.brand .brand-logo.light {
  display: block !important;
}

[data-variant="v3"] .brand .brand-logo.light {
  display: none !important;
}

[data-variant="v3"] .brand .brand-logo.dark {
  display: block !important;
}

.app[data-sidebar-collapsed] .brand .brand-logo {
  display: none !important;
}

.brand-logo-closed {
  display: none;
  height: 30px;
  object-fit: contain;
  width: 36px;
}

.app[data-sidebar-collapsed] .brand {
  flex-direction: column;
  gap: 8px;
}

.app[data-sidebar-collapsed] .brand .brand-logo-closed.light {
  display: block !important;
}

[data-variant="v3"] .app[data-sidebar-collapsed] .brand .brand-logo-closed.light {
  display: none !important;
}

[data-variant="v3"] .app[data-sidebar-collapsed] .brand .brand-logo-closed.dark {
  display: block !important;
}

.pages {
  padding: 24px;
}

.page[data-active] > :last-child {
  margin-bottom: 0;
}

.main {
  overscroll-behavior-y: contain;
}

.expand-grid {
  align-items: start;
}

[hidden] {
  display: none !important;
}

.page-head {
  align-items: center;
  margin-bottom: 20px;
  min-height: 52px;
}

.page-head > div:first-child {
  min-width: 0;
}

.page-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-tabs,
.profile-tabs {
  margin-top: -2px;
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar,
.profile-tabs::-webkit-scrollbar,
html[data-page="profile"] .main::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

html[data-page="profile"] .main {
  scrollbar-width: none;
}

body {
  font-size: var(--wdesk-base-font-size, 13.5px);
}

button:not(.iconbtn):not(.brand-collapse):not(.nav-item):not(.timer-btn):not(.profile-chip) {
  font-size: var(--wdesk-button-font-size, 14px);
}

.spec-modebar {
  display: none !important;
}

.spec-document-select,
[data-spec-layout-switch] {
  display: none !important;
}

.spec-block-actions {
  display: none;
}

.spec-blocks-card {
  overflow: hidden;
}

.spec-client-preview {
  gap: 6px;
  padding: 10px 12px;
}

.spec-mini-stats {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.spec-block-toggles {
  display: grid;
  gap: 7px;
  max-height: 320px;
  overflow: auto;
  padding-right: 3px;
}

.spec-block-toggle {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 36px;
  padding: 8px 10px;
}

.spec-block-toggle span {
  line-height: 1.25;
  min-width: 0;
}

.spec-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.spec-output {
  max-height: calc(100vh - 300px);
  overflow: auto;
  scroll-behavior: smooth;
}

.spec-output-section {
  border: 1px solid transparent;
  border-radius: 15px;
  margin: 0 0 12px;
  padding: 14px 16px;
  transition: background .18s ease, border-color .18s ease;
}

.spec-output-section h4 {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 10px;
}

.spec-output-section p {
  margin: 0 0 10px;
}

.spec-output ::selection {
  background: rgba(0, 174, 239, .42);
  color: #fff;
}

.spec-output-section p:last-child {
  margin-bottom: 0;
}

.spec-output-section [data-manual-edited] {
  border-left: 2px solid rgba(148, 163, 184, .45);
  padding-left: 10px;
}

.spec-output [data-spec-focus],
.spec-output-section[data-spec-focus] {
  background: transparent;
  border-color: inherit;
  outline: 0;
}

.spec-output [data-spec-line][data-spec-focus] > [data-spec-line-text],
.spec-output [data-spec-line][data-spec-selected-text] > [data-spec-line-text] {
  background: rgba(0, 174, 239, 0.08);
  border-radius: 6px;
  box-shadow: inset 2px 0 0 rgba(0, 174, 239, 0.7);
  color: var(--text);
  padding: 1px 4px 1px 6px;
}

.spec-var-pill {
  align-items: center;
  border: 1px solid rgba(34, 197, 94, .34);
  border-radius: 999px;
  color: #22c55e;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  margin-left: 6px;
  padding: 3px 7px;
  vertical-align: middle;
  white-space: nowrap;
}

.spec-var-pill::before {
  content: attr(data-label);
}

.spec-var-pill[data-filled="0"] {
  border-color: rgba(248, 113, 113, .42);
  color: #f87171;
}

.spec-missing-line {
  align-items: center;
  border: 1px dashed rgba(248, 113, 113, .32);
  border-radius: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

.spec-missing-line > span {
  color: #f87171;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.spec-missing-line > strong {
  color: var(--text);
}

.spec-other-panel {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
  padding: 10px;
}

.spec-other-panel label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.spec-other-panel label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.spec-other-panel input {
  margin: 0;
}

@media (max-width: 760px) {
  .spec-other-panel {
    grid-template-columns: 1fr;
  }
}

.spec-grid[data-layout="output"] .spec-output {
  max-height: calc(100vh - 250px);
}

.spec-output [data-spec-focus] {
  background: transparent;
  outline: 0;
}

.spec-drafts-modal {
  width: min(760px, 100%);
}

.spec-draft-list {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.spec-draft-row {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.spec-draft-row.current {
  border-color: rgba(0, 180, 255, 0.35);
}

.spec-draft-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.spec-draft-row.disabled {
  opacity: .55;
}

.spec-draft-row strong,
.spec-draft-row span {
  display: block;
}

.spec-draft-row span {
  color: var(--muted);
  font-size: 12px;
}

[data-spec-readonly] [data-spec-layout-switch],
[data-spec-readonly] [data-spec-save-draft],
[data-spec-readonly] [data-spec-save-client],
[data-spec-readonly] [data-spec-regenerate],
[data-spec-readonly] [data-spec-save-preview] {
  display: none !important;
}

[data-spec-readonly] .spec-output {
  cursor: default;
  user-select: text;
}

.profile-grid > [data-tab-panel] {
  display: none;
}

.profile-grid > [data-tab-panel][data-active] {
  display: block;
}

.profile-grid > [data-tab-panel="profile-account"][data-active],
.profile-grid > [data-tab-panel="profile-notifications"][data-active],
.profile-grid > [data-tab-panel="profile-appearance"][data-active] {
  grid-column: 1 / -1;
}

.notes-list-head {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
}

.notes-list-head strong {
  color: var(--text);
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.notes-list-head-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.notes-list-head-meta span {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

.note-card-head {
  align-items: flex-start !important;
  border-bottom: 1px solid var(--line);
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  padding-bottom: 10px;
}

.note-card-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.note-card-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-card-title span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-card-head .badge {
  justify-self: end;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card,
.data,
.kpi,
.admin-card,
.admin-info-card,
.file-sidebar,
.file-detail,
.task-detail,
.lane,
.note,
.mail-preview,
.manual-editor {
  border-radius: 15px;
  box-shadow: none !important;
}

.card,
.admin-card,
.admin-info-card {
  padding: 20px;
}

.admin-support-grid {
  margin-top: 16px;
}

.admin-summary-compact {
  margin: 12px 0 0;
}

.admin-summary-compact article {
  padding: 10px 12px;
}

.admin-summary-compact strong {
  font-size: 18px;
  margin: 2px 0;
}

.admin-summary-compact span,
.admin-summary-compact i {
  font-size: 10px;
}

.card-head {
  gap: 12px;
  margin-bottom: 16px;
}

.card-head h2,
.admin-card > header strong,
.small-h,
.page-title {
  letter-spacing: 0;
}

.btn,
.btn.xs {
  min-height: 32px;
  padding: 5px 20px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 50px;
  white-space: nowrap;
}

.btn.ghost,
.btn.primary {
  justify-content: center;
}

.as-button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

select.select,
.form-grid input,
.form-grid select,
.form-grid textarea,
.admin-form input,
.admin-form select,
.admin-form textarea,
.qfield input,
.qfield select,
.qfield textarea,
.mini-form input,
.mini-form select {
  min-height: 40px;
  border-radius: 15px;
}

.form-grid textarea {
  resize: vertical;
  width: 100%;
}

.tbl th,
.tbl td {
  vertical-align: middle;
}

.row-actions,
.form-actions,
.admin-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.bulkbar {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
}

.bulkbar .chk,
.vacation-entry label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.ops-list-controls {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
}

.ops-list-controls .chk {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.ops-list-controls .select {
  min-height: 40px;
}

.ops-pagination {
  border: 1px solid var(--line);
  border-radius: 15px;
  justify-content: flex-end;
  margin: -6px 0 14px;
}

.ops-pagination span {
  margin-right: auto;
}

.btn.danger,
.btn.ghost.danger,
.as-button.danger,
.task-play.danger {
  border-color: rgba(255, 107, 102, 0.28);
  color: var(--danger);
}

.task-detail[data-empty] {
  align-content: start;
}

.task-detail[data-empty] h3 {
  color: var(--muted);
}

.board[data-task-view="list"] {
  display: block;
}

.task-list-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
}

.task-list-table td {
  vertical-align: middle;
}

.task-list-table tr[data-task-id] {
  cursor: pointer;
}

.task-list-table tr[data-selected] td {
  background: var(--accent-soft);
}

.card-check {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.task-card .card-check {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
}

.task-card {
  position: relative;
}

.board[data-task-view="kanban"] .task-card {
  cursor: grab;
  transition: border-color .16s ease, opacity .16s ease, transform .16s ease, background-color .16s ease;
}

.board[data-task-view="kanban"] .task-card.is-open {
  background: rgba(0, 174, 239, .07);
  border-color: rgba(0, 174, 239, .46);
}

.board[data-task-view="kanban"] .task-card:active {
  cursor: grabbing;
}

.board[data-task-view="kanban"] .task-card.is-dragging {
  opacity: .5;
  transform: scale(.985);
}

.board[data-task-view="kanban"] .lane {
  transition: background-color .16s ease, border-color .16s ease;
}

.board[data-task-view="kanban"] .lane.is-drop-target {
  background: rgba(0, 174, 239, .07);
  border-color: rgba(0, 174, 239, .74);
}

.board[data-task-view="kanban"] .lane.is-drop-same {
  background: var(--panel-2);
  border-color: var(--line-strong);
}

[data-theme="light"] .board[data-task-view="kanban"] .lane.is-drop-target {
  background: rgba(0, 132, 204, .08);
  border-color: rgba(0, 132, 204, .55);
}

.task-card .task-card-head {
  align-items: center;
  padding-right: 30px;
}

.task-card-toggle-indicator {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 15px;
  height: 18px;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  position: relative;
  top: -2px;
  transform: rotate(0deg);
  transition: color .16s ease, transform .16s ease;
  width: 18px;
}

.task-card.is-open .task-card-toggle-indicator {
  color: var(--accent);
  transform: rotate(180deg);
}

.task-card-expanded {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding-top: 12px;
}

.task-card-expanded strong {
  color: var(--text);
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 7px;
}

.task-card-subtask-mini-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.task-card-subtask-mini-list li {
  align-items: flex-start;
  color: var(--text);
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.task-card-subtask-mini-list li.is-done {
  color: var(--muted);
  text-decoration: line-through;
}

.task-card-subtask-box {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 15px;
  font-size: 11px;
  height: 15px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  width: 15px;
}

.task-card-description p {
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.task-card .task-card-actions-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 10px;
}

.task-card-owner,
.task-card-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
}

.task-card-owner {
  color: var(--muted);
  flex: 1 1 auto;
  font-size: 12px;
}

.task-card-owner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.task-card .task-play {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 32px;
  min-width: 74px;
  padding: 5px 14px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.task-detail-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}

.task-detail-actions .btn {
  flex: 0 0 auto;
}

.task-list-table .row-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  min-width: 170px;
}

.task-list-table .row-actions .btn {
  min-width: 78px;
}

@media (max-width: 1420px) {
  .task-card .task-card-actions-row {
    align-items: stretch;
    flex-direction: column;
  }

  .task-card-actions {
    justify-content: stretch;
  }

  .task-card .task-play {
    flex: 1 1 0;
  }
}

.note header .card-check {
  margin-right: 4px;
}

.page[data-page="notes"] .ops-list-controls {
  background: color-mix(in srgb, var(--panel-2) 86%, var(--bg));
  border-color: var(--line-strong);
  margin-bottom: 18px;
  padding: 14px 16px 14px 18px;
  position: relative;
}

.page[data-page="notes"] .ops-list-controls::before {
  background: var(--muted);
  border-radius: 999px;
  content: "";
  height: calc(100% - 24px);
  left: 8px;
  opacity: .42;
  position: absolute;
  top: 12px;
  width: 3px;
}

.page[data-page="notes"] .ops-list-controls .chk {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 38px;
  padding: 0 14px;
}

.page[data-page="notes"] .ops-list-controls .chk input[type="checkbox"] {
  height: 16px;
  width: 16px;
}

.page[data-page="offers"] .tbl td {
  padding-bottom: 12px;
  padding-top: 12px;
}

.offer-title-cell {
  max-width: 560px;
  min-width: 280px;
}

.offer-title-cell strong,
.offer-summary,
.offer-amount {
  display: block;
}

.offer-title-cell strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 5px;
}

.offer-summary {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  max-width: 62ch;
}

.offer-amount {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  margin-top: 8px;
  padding: 4px 10px;
  width: fit-content;
}

.offer-actions {
  gap: 8px;
}

.offer-actions .btn.xs {
  min-width: 90px;
  padding-left: 12px;
  padding-right: 12px;
}
.offer-actions a.btn { text-decoration: none; }

.file-workspace.file-workspace-simple {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.file-workspace-simple .file-main {
  min-width: 0;
}

.page[data-page="files"] [data-file-project-filter] {
  min-width: 220px;
}

.page[data-page="files"] .file-toolbar {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.page[data-page="files"] .file-toolbar .search {
  flex: 1 1 320px;
  max-width: 420px;
  min-width: 240px;
}

.page[data-page="files"] .file-type-filter {
  min-width: 170px;
}

.file-row {
  grid-template-columns: auto 44px minmax(0, 1fr) auto auto;
}

.file-row > input[type="checkbox"] {
  align-self: center;
  justify-self: center;
}

.file-icon-slot {
  align-items: center;
  align-self: center;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  justify-self: center;
  line-height: 1;
  width: 44px;
}

.file-icon {
  align-items: center;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  letter-spacing: .02em;
  overflow: hidden;
}

.file-row .file-icon,
.file-row .file-thumb,
.file-icon-slot .file-icon,
.file-icon-slot .file-thumb {
  box-sizing: border-box;
  border-radius: 10px;
  height: 34px;
  margin: 0;
  flex: 0 0 34px;
  width: 34px;
}

.file-row .file-icon,
.file-icon-slot .file-icon {
  display: inline-flex;
  line-height: 1;
  padding: 0;
}

.file-row .file-thumb,
.file-icon-slot .file-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.file-icon svg {
  display: block;
  flex: 0 0 auto;
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.file-icon span {
  display: block;
  flex: 0 0 auto;
  font-size: 8px;
  line-height: 1;
  text-align: center;
  width: 100%;
}

.file-icon.large {
  gap: 4px;
}

.file-icon.large svg {
  height: 24px;
  width: 24px;
}

.file-icon.large span {
  font-size: 10px;
}

.file-icon.file-kind-text {
  background: rgba(148, 163, 184, .16);
  color: #cbd5e1;
}

.file-icon.file-kind-document {
  background: rgba(59, 130, 246, .16);
  color: #bfdbfe;
}

.file-icon.file-kind-image {
  background: rgba(0, 174, 239, .16);
  color: #93dcff;
}

.file-icon.file-kind-video {
  background: rgba(217, 70, 239, .15);
  color: #f0abfc;
}

.file-icon.file-kind-archive {
  background: rgba(234, 179, 8, .15);
  color: #fde68a;
}

.file-icon.file-kind-other {
  background: rgba(255, 255, 255, .08);
  color: #d1d5db;
}

.file-thumb {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  overflow: hidden;
  width: 42px;
}

.file-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.file-thumb.large {
  border-radius: 15px;
  height: 58px;
  margin-bottom: 14px;
  width: 58px;
}

.file-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
}

.file-row-actions .btn.xs {
  padding-left: 14px;
  padding-right: 14px;
}

.file-preview-slot {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: none;
  margin: 14px 0;
  max-height: 360px;
  min-height: 120px;
  overflow: hidden;
}

.file-preview-slot.is-open {
  display: block;
}

.file-preview-slot img,
.file-preview-slot video,
.file-preview-slot iframe {
  background: #fff;
  border: 0;
  display: block;
  height: 360px;
  object-fit: contain;
  width: 100%;
}

.file-preview-slot iframe {
  object-fit: initial;
}

.file-preview-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  min-height: 120px;
  padding: 14px;
}

.agenda li {
  grid-template-columns: 64px 1px minmax(0, 1fr);
}

.meet-actions {
  flex-wrap: wrap;
}

.meet-actions .btn.xs {
  line-height: 1;
}

.meeting-action-btn {
  min-height: 31px;
  gap: 6px;
}

.meeting-action-btn .ic {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.meeting-action-btn[disabled] {
  cursor: default;
  opacity: .55;
}

.meet-actions .icon-only.meeting-action-btn {
  width: 31px;
  min-width: 31px;
  padding-inline: 0;
  justify-content: center;
}

.meet-participant-emails {
  overflow-wrap: anywhere;
}

.meet-note {
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.devlog-live-item {
  grid-template-columns: auto minmax(220px, 0.42fr) minmax(0, 0.58fr);
}

.devlog-live-item .card-check {
  align-self: start;
  margin-top: 3px;
}

[data-variant="v3"] .task-list-panel {
  background: rgba(255, 255, 255, .025);
}

.vacation-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.vacation-summary article,
.vacation-list article {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
}

.vacation-summary article {
  padding: 12px;
}

.vacation-summary span,
.vacation-list span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.vacation-summary strong {
  display: block;
  font-size: 22px;
  font-weight: 600;
  margin-top: 4px;
}

.vacation-entry {
  grid-template-columns: 1.1fr .7fr .9fr 1.6fr auto;
  margin-top: 12px;
}

.vacation-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.page[data-page="attendance"] .mini-form {
  grid-template-columns: minmax(145px, 1fr) repeat(3, minmax(100px, .7fr));
}

.page[data-page="attendance"] .manual-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.page[data-page="attendance"] .manual-grid > .card {
  min-width: 0;
  overflow: hidden;
}

.page[data-page="attendance"] .mini-form > label,
.page[data-page="attendance"] .mini-form > button {
  min-width: 0;
}

.page[data-page="attendance"] .mini-form > label:nth-child(5) {
  grid-column: span 1;
}

.page[data-page="attendance"] .mini-form > label:nth-child(6) {
  grid-column: span 2;
}

.page[data-page="attendance"] .mini-form > button {
  justify-self: end;
  min-width: 132px;
  width: 100%;
}

.page[data-page="attendance"] .tbl.mini {
  table-layout: fixed;
}

.page[data-page="attendance"] .tbl.mini th:first-child,
.page[data-page="attendance"] .tbl.mini td:first-child {
  width: 46%;
}

.page[data-page="attendance"] .tbl.mini td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-check {
  align-items: center !important;
  flex-direction: row !important;
  gap: 8px !important;
  min-height: 40px;
  padding: 0 4px;
  text-transform: none !important;
}

.mini-check input {
  min-height: auto !important;
  width: auto;
}

.cal-day.is-selected {
  border-color: rgba(0, 195, 255, 0.72);
  background: rgba(0, 174, 239, 0.08);
}

.cal-day.is-day-off .day-bar b {
  background: linear-gradient(90deg, #18d38a, #00aeef);
}

.cal-day.has-overtime em::after {
  content: " +";
  color: var(--accent);
}

.attendance-day-panel {
  width: min(1240px, calc(100vw - 48px));
}

.attendance-day-grid {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px) minmax(220px, 300px);
}

.attendance-day-grid .switch-row {
  align-self: end;
  min-height: 42px;
  padding: 0 12px;
}

.attendance-entry-section {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: grid;
  gap: 8px;
  padding: 12px;
  overflow: visible;
}

.attendance-entry-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.attendance-entry-head b {
  color: var(--text);
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.attendance-entry-head span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.attendance-entry-labels,
.attendance-entry-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 82px 82px minmax(140px, 180px) minmax(200px, 1fr) 64px 30px;
  align-items: center;
  min-width: 0;
}

.attendance-entry-labels {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 4px;
  text-transform: uppercase;
}

.attendance-entry-list {
  display: grid;
  gap: 8px;
}

.attendance-entry-row {
  border-radius: 15px;
  background: var(--panel);
}

[data-variant="v3"] .attendance-entry-row {
  background: var(--panel-2);
}

.attendance-entry-row input,
.attendance-entry-row select {
  min-height: 36px;
  padding: 7px 10px;
}

.attendance-entry-row input[name="entry_start"],
.attendance-entry-row input[name="entry_end"] {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0;
  text-align: center;
}

.attendance-entry-row [data-entry-duration] {
  color: var(--text);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.attendance-entry-row[data-empty-time] [data-entry-duration] {
  color: var(--danger);
}

.switch-row {
  align-items: center;
  align-self: stretch;
  border: 1px solid var(--line);
  border-radius: 15px;
  flex-direction: row !important;
  gap: 10px !important;
  justify-content: flex-start;
  min-height: 42px;
  padding: 10px 12px;
  text-transform: none !important;
}

.switch-row input {
  min-height: auto !important;
  width: auto !important;
}

.switch-row span {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.attendance-day-summary {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px 14px;
}

.attendance-day-summary span {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
}

.attendance-day-summary b {
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 600;
}

.work-balance-card {
  display: grid;
  gap: 14px;
}

.work-balance-card .card-head.compact {
  margin-bottom: 0;
}

.work-balance-card .card-head.compact p {
  margin: 0;
}

.work-balance-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-balance-summary article {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: 12px 14px;
}

.work-balance-summary span,
.work-balance-form label > span,
.work-balance-list small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.work-balance-summary strong {
  color: var(--text);
  display: block;
  font-size: 21px;
  font-weight: 700;
  margin-top: 5px;
  white-space: nowrap;
}

.work-balance-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(190px, 220px) minmax(120px, 150px) minmax(220px, 1fr) auto;
}

.work-balance-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.work-balance-form input {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  min-height: 40px;
  min-width: 0;
  padding: 8px 12px;
  width: 100%;
}

.work-balance-form input[type="date"] {
  font-family: "JetBrains Mono", monospace;
  min-width: 190px;
  padding-right: 14px;
}

.work-balance-form .btn {
  min-height: 40px;
  white-space: nowrap;
}

.work-balance-list {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
  padding-top: 4px;
}

.work-balance-item {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 112px 88px minmax(0, 1fr) 32px;
  min-width: 0;
  padding: 9px 0;
}

.work-balance-item + .work-balance-item {
  border-top: 1px solid var(--line);
}

.work-balance-item b {
  color: var(--text);
  white-space: nowrap;
}

.work-balance-item span {
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-balance-item .iconbtn {
  justify-self: end;
}

.vacation-list article {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 10px 12px;
}

.vacation-list b {
  font-weight: 600;
}

.search {
  min-height: 36px;
}

.top-tools > .global-search-results {
  height: auto;
  left: 0;
  right: auto;
  top: 44px;
  width: min(460px, calc(100vw - 40px));
}

.global-search-results button {
  display: grid;
  gap: 3px;
}

.global-search-results button[data-active],
.global-search-results button:focus-visible {
  background: var(--brand-soft);
  border-color: rgba(0, 174, 239, .42);
  outline: none;
}

[data-variant="v3"] .card,
[data-variant="v3"] .data,
[data-variant="v3"] .admin-card,
[data-variant="v3"] .admin-info-card,
[data-variant="v3"] .file-sidebar,
[data-variant="v3"] .file-detail,
[data-variant="v3"] .task-detail,
[data-variant="v3"] .lane,
[data-variant="v3"] .note,
[data-variant="v3"] .mail-preview,
[data-variant="v3"] .manual-editor {
  background: #18181e;
  border-color: #26262d;
}

.inline-status {
  min-width: 132px;
  height: 34px;
  padding: 0 34px 0 12px;
  border-radius: 999px;
  font-size: 13px;
}

.avatar.has-image {
  background-size: cover;
  background-position: center;
  color: transparent;
}

.user-cell {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.user-cell > div {
  min-width: 0;
}

.admin-user-access-summary {
  color: var(--muted);
  display: block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 112px;
}

.admin-user-actions .btn.xs {
  justify-content: center;
  padding-inline: 12px;
  width: 100%;
}

.admin-module-checks {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
}

.admin-module-checks legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0 6px;
  text-transform: uppercase;
}

.admin-module-checks > div {
  display: grid;
  gap: 6px 16px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.admin-module-checks label {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  display: flex;
  flex-direction: row;
  font-weight: 650;
  gap: 7px;
  justify-content: flex-start;
  letter-spacing: 0;
  min-height: 22px;
  padding: 0;
  text-transform: none;
}

.admin-module-checks input[type="checkbox"] {
  appearance: auto !important;
  accent-color: var(--accent);
  flex: 0 0 15px;
  height: 15px !important;
  margin: 0 !important;
  min-height: 15px !important;
  padding: 0 !important;
  width: 15px !important;
}

.admin-module-checks.is-compact > div {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.admin-form .admin-module-checks.is-compact {
  max-height: none;
}

.admin-form .admin-module-checks.is-compact label {
  font-size: 12px;
  line-height: 1.2;
}

.admin-form .admin-module-checks.full,
.wi-modal-grid .admin-module-checks.full {
  grid-column: 1 / -1;
}

.user-avatar-manager {
  width: min(720px, 100%);
}

.avatar-manager-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 20px;
}

.avatar-manager-item {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.project-title-cell,
.client-name-cell,
.client-project-inline {
  align-items: center;
  display: flex;
  min-width: 0;
}

.project-title-cell {
  gap: 10px;
}

.client-name-cell {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.client-project-inline {
  color: var(--muted);
  gap: 8px;
  font-size: 12px;
  line-height: 1.2;
}

.project-logo {
  align-items: center;
  background: #11141b;
  border: 0;
  border-radius: 8px;
  color: #8f98aa;
  display: inline-flex;
  flex: 0 0 44px;
  height: 22px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.project-logo.has-image {
  background-color: transparent;
  background-clip: border-box;
  background-origin: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box;
  color: transparent;
  padding: 0;
}

.client-project-inline .project-logo {
  border-radius: 6px;
  flex-basis: 32px;
  height: 16px;
  width: 32px;
}

.page[data-page="clients"] .data {
  overflow-x: hidden;
}

/* ── Táblázat fejléc: ikon + rövid szöveg ────────────────────── */
.th-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.th-ic {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
  flex-shrink: 0;
}

.client-table {
  min-width: 0;
  table-layout: auto;   /* tartalom alapján arányos szélesség */
  width: 100%;
  max-width: 100%;
}

/* Max-widthek megakadályozzák a túlfolyást */
.client-table .client-col-check   { width: 36px; }
.client-table .client-col-name    { max-width: 300px; }
.client-table .client-col-contact { max-width: 180px; }
.client-table .client-col-owner   { max-width: 150px; white-space: nowrap; }
.client-table .client-col-status  { max-width: 140px; }
.client-table .client-col-date    { max-width: 80px; text-align: center; white-space: nowrap; }
.client-table .client-col-actions { width: 108px; max-width: 108px; overflow: visible; padding-right: 10px !important; }

.client-table th,
.client-table td {
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
}

.client-table tbody td {
  height: 58px;
}

.client-table .client-name-cell strong,
.client-table .client-name-cell .sub,
.client-table .client-project-inline span {
  max-width: 100%;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-table .inline-status {
  max-width: 100%;
  width: 100%;
  font-size: 11.5px;
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Felelős oszlop: avatar + név egy sorban */
.client-table td.client-col-owner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table-cell;
  vertical-align: middle;
}

/* Akció gombok: jobb oldali tér + kis gombok */
.client-table td.client-col-actions {
  overflow: visible !important;
  padding: 0 14px 0 4px !important;   /* 14px jobb padding → kuka nem lóg a szélre */
}
.client-table .client-row-actions {
  gap: 4px !important;
  justify-content: flex-end;
}
.client-table .client-row-actions .icon-action,
.client-table .client-row-actions button {
  width: 26px !important;
  height: 26px !important;
  padding: 4px !important;
  min-width: 28px;
}

.client-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
  width: max-content;
}

.client-table .client-row-actions .btn.xs {
  min-height: 32px;
  padding: 5px 12px !important;
  font-size: 14px;
}

.client-table .pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-table thead th:nth-child(6) {
  line-height: 1.15;
  white-space: nowrap;
}

.client-table thead th:nth-child(7),
.client-table tbody td:nth-child(7) {
  padding-left: 6px;
  padding-right: 8px;
}

.client-table .num.mono {
  font-size: 12px;
}

@media (max-width: 1500px) {
  /* min-width eltávolítva — ikonos fejlécekkel és fix oszlopszélességekkel kiférnek */
  .client-table {
    min-width: 0;
  }
}

.page[data-page="projects"] .data {
  overflow-x: visible;
  overflow-y: visible;
}

.project-table {
  min-width: 0;
  table-layout: auto;   /* tartalom arányos — nincs zsák hely */
  width: 100%;
  max-width: 100%;
}

/* Max-widthek az oszlopokon */
.project-table .project-col-check    { width: 36px; }
.project-table .project-col-name     { max-width: 260px; }
.project-table .project-col-client   { max-width: 160px; }
.project-table .project-col-owner    { max-width: 150px; white-space: nowrap; }
.project-table .project-col-priority { max-width: 70px; text-align: center; }
.project-table .project-col-progress { max-width: 160px; }
.project-table .project-col-date     { max-width: 90px; text-align: center; white-space: nowrap; }
.project-table .project-col-status   { max-width: 140px; }
.project-table .project-col-actions  { width: 90px; max-width: 90px; overflow: visible; padding-right: 14px !important; }

.project-table th,
.project-table td {
  overflow: hidden;
}

/* Projekt tábla: TD-knek nincs class → nth-child-dal célozzuk */
/* 4. = Felelős: avatar + név egy sorban */
.project-table tbody td:nth-child(4) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* 8. = Státusz: ne vágja le, select legyen legalább 120px */
.project-table tbody td:nth-child(8) {
  overflow: visible !important;
  min-width: 120px;
  padding: 0 6px !important;
}
.project-table tbody td:nth-child(8) select {
  min-width: 110px;
  width: 100%;
}

/* 9. = Akció gombok: jobb padding, visible overflow */
.project-table tbody td:nth-child(9) {
  overflow: visible !important;
  padding-right: 14px !important;
}
.project-table .project-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.project-table .project-row-actions .icon-action,
.project-table .project-row-actions button {
  width: 26px !important;
  height: 26px !important;
  padding: 4px !important;
  min-width: 26px;
}

/* Kliens tábla: ugyanaz nth-child-dal */
/* 4. = Felelős */
.client-table tbody td:nth-child(4) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* 7. = Akció gombok */
.client-table tbody td:nth-child(7) {
  overflow: visible !important;
  padding-right: 14px !important;
}

.project-table tbody td {
  height: 58px;
}

.project-table .project-name-link {
  display: block;
  line-height: 1.25;
  max-width: 100%;
  text-align: left;
  white-space: nowrap;        /* ne törjön "Jung & Stark" */
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-table .row-progress {
  max-width: 110px;
  min-width: 80px;
  width: 110px;
}

/* Progress cella: ne legyen túl széles */
.project-table tbody td:nth-child(6) {
  max-width: 160px;
  white-space: nowrap;
}

/* Projekt név: min szélesség hogy ne törjön */
.project-table .project-title-cell,
.project-table tbody td:nth-child(2) {
  min-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-due {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.15;
  min-width: 0;
}

.project-due small {
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.project-due.soon small {
  color: var(--warning, #f6c96b);
}

.project-due.late small {
  color: var(--danger, #ff6b6b);
}

.project-due.empty small {
  color: var(--muted-2);
  font-weight: 600;
}

.project-row-actions,
.client-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.icon-action {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  width: 32px;
}

.icon-action:hover {
  background: var(--panel-3);
  border-color: var(--line-strong);
}

.icon-action svg {
  fill: none;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 15px;
}

.icon-action.danger {
  border-color: rgba(255, 107, 107, .42);
  color: #ff6b6b;
}

.project-status-inline {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2020/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%238e96aa' d='M6 8.5 1.8 4.3h8.4z'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  min-width: 110px;   /* elég "Nem besorol"-hoz */
  max-width: 160px;
  min-height: 30px;
  padding: 5px 22px 5px 10px !important;  /* !important felülírja a global select 44px-et */
  width: 100%;
}

.project-priority-inline {
  appearance: none;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  min-width: 66px;
  padding: 7px 28px 7px 12px;
}

.project-priority-inline:focus {
  border-color: var(--accent);
  outline: none;
}

.project-status-inline:focus {
  border-color: var(--accent);
  outline: none;
}

.project-status-inline.good {
  background-color: rgba(66, 211, 146, .14);
  color: #9cecc8;
}

.project-status-inline.warn {
  background-color: rgba(249, 188, 71, .15);
  color: #f8d26b;
}

.project-status-inline.info {
  background-color: rgba(0, 184, 255, .14);
  color: #7fdcff;
}

.project-status-inline.pill-done {
  background-color: rgba(66, 211, 146, .14);
  color: #9cecc8;
}

.project-status-inline.pill-call,
.project-status-inline.pill-spec {
  background-color: rgba(249, 188, 71, .15);
  color: #f8d26b;
}

.project-status-inline.pill-dev,
.project-status-inline.pill-design,
.project-status-inline.pill-test,
.project-status-inline.pill-meet {
  background-color: rgba(0, 184, 255, .14);
  color: #7fdcff;
}

.mail-tools {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
}

.mail-tools .search {
  min-width: min(100%, 280px);
}

.mail-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.mail-list article.mail-empty {
  cursor: default;
  grid-template-columns: 1fr;
}

.mail-list article {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.mail-list article > input[type="checkbox"] {
  align-self: start;
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 2px;
}

.mail-list article strong,
.mail-list article span {
  grid-column: 2;
}

.mail-list article time {
  grid-column: 3;
}

.mail-list article.mail-empty {
  grid-template-columns: 1fr;
}

.mail-tools [data-mail-selected-count] {
  min-width: 72px;
}

.mail-pagination {
  border: 1px solid var(--line);
  border-radius: 15px;
}

.list-pagination,
.mail-pagination {
  align-items: center;
  gap: 10px;
}

.page-size-control {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.page-size-control .select {
  min-height: 36px;
  min-width: 86px;
  padding: 8px 32px 8px 12px;
}

.list-pagination .page-btns,
.mail-pagination .page-btns {
  margin-left: 0;
}

.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  border: 1px solid rgba(0, 195, 255, 0.32);
  border-radius: 50%;
  background: rgba(0, 195, 255, 0.08);
  color: var(--accent);
  cursor: help;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  vertical-align: middle;
}

.help-tip::after {
  content: none;
}

.ui-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: min(300px, calc(100vw - 28px));
  padding: 8px 11px;
  border: 1px solid rgba(0, 195, 255, .22);
  border-radius: 10px;
  background: rgba(18, 18, 23, .98);
  color: var(--text);
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  white-space: normal;
}

.ui-tooltip[data-show] {
  opacity: 1;
  transform: translateY(0);
}

html[data-variant="v1"] .ui-tooltip {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(0, 97, 160, .2);
  color: var(--text);
}

.spec-admin-tree .spec-admin-block {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 14px;
}

.spec-admin-tree .spec-admin-block > header {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.spec-admin-question {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 16px auto minmax(0, 1fr) auto;
}

.spec-admin-question-list {
  display: grid;
  gap: 8px;
}

.spec-admin-question,
.spec-admin-empty {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.spec-admin-tree .is-inactive {
  opacity: .55;
}

.spec-admin-empty {
  color: var(--muted);
  font-size: 12px;
}

/* ── Spec question checkbox ── */
.spec-q-checkbox {
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  height: 15px;
  margin: 0;
  opacity: .45;
  transition: opacity .15s;
  width: 15px;
}
.spec-q-checkbox:hover,
.spec-q-checkbox:checked {
  opacity: 1;
}
.spec-admin-question.is-selected {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent) !important;
}

/* ── Spec bulk action bar ── */
.spec-bulk-bar {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card, var(--bg)));
  border: 1px solid var(--accent);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 14px;
}
.spec-bulk-bar [data-spec-bulk-count] {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.hidden-file-input {
  height: 1px;
  left: -9999px;
  opacity: 0;
  position: fixed;
  top: -9999px;
  width: 1px;
}

.tbl tr[data-clickable] {
  cursor: pointer;
}

.tbl tr[data-selected] .inline-status {
  border-color: rgba(126, 132, 145, 0.42);
}

[data-calendar-settings] input[type="url"] {
  font-family: inherit;
}

.spec-document-select {
  width: min(340px, 100%);
}

.phase-list li {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.phase-list li small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.phase-list li.disabled {
  opacity: 0.54;
}

.spec-grid:not([data-collapsed]) [data-spec-collapse] {
  width: auto;
  min-width: 0;
  justify-content: center;
  padding: 10px 14px;
}

.spec-grid:not([data-collapsed]) [data-spec-collapse] span {
  display: inline;
}

.spec-grid:not([data-collapsed]) .spec-collapse-ic-close {
  display: block !important;
}

.spec-grid:not([data-collapsed]) .spec-collapse-ic-open {
  display: none !important;
}

.spec-grid[data-collapsed] .spec-collapse-ic-close {
  display: none !important;
}

.spec-grid[data-collapsed] .spec-collapse-ic-open {
  display: block !important;
}

.qfield label {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.qfield label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.qfield.required {
  border-color: rgba(0, 195, 255, 0.22);
}

.spec-output [data-spec-section] {
  scroll-margin-top: 16px;
}

.spec-modebar {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px;
}

.spec-modebar button {
  border: 1px solid transparent;
  border-radius: 50px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  min-height: 38px;
  padding: 8px 18px;
}

.spec-modebar button[data-active] {
  border-color: rgba(0, 195, 255, 0.36);
  background: rgba(0, 195, 255, 0.10);
  color: var(--text);
}

.spec-preview-tools {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 10px;
}

.spec-preview-tools span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.spec-preview-tools span[data-manual] {
  color: var(--accent);
}

.spec-history-tools {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.spec-history-tools .iconbtn {
  height: 40px;
  min-height: 40px;
  width: 40px;
}

.spec-history-tools [disabled] {
  cursor: not-allowed;
  opacity: .42;
}

.spec-version-modal {
  width: min(760px, 100%);
}

.spec-version-list {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.spec-version-row {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 12px;
}

.spec-version-row strong,
.spec-version-row span,
.spec-version-row small {
  display: block;
}

.spec-version-row span,
.spec-version-row small {
  color: var(--muted);
  font-size: 12px;
}

.spec-group-intro {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px;
}

.spec-group-intro strong,
.spec-client-preview strong,
.internal-list strong,
.spec-admin-toolbar strong,
.spec-admin-group > header strong {
  font-weight: 600;
}

.spec-group-intro span,
.spec-client-preview span,
.spec-mini-stats,
.internal-list span,
.spec-admin-group small {
  color: var(--muted);
  font-size: 12px;
}

.spec-group-intro.disabled,
.spec-admin-group.disabled {
  opacity: 0.72;
}

.spec-client-preview {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: grid;
  gap: 4px;
  padding: 12px;
}

.spec-client-preview strong {
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.spec-left .spec-blocks-card {
  padding: 14px;
}

.spec-left .spec-blocks-card .small-h {
  margin-bottom: 12px;
}

.spec-mini-stats {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.spec-block-toggles {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.spec-block-toggle {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.spec-block-toggle input,
.mini-check input {
  accent-color: var(--accent);
}

.spec-block-toggle span {
  font-size: 13px;
  font-weight: 600;
}

.spec-block-toggle.disabled {
  opacity: 0.58;
}

.spec-other-input {
  display: block;
  width: min(100%, 360px);
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  box-shadow: none;
}

.spec-other-input::placeholder {
  color: var(--muted);
}

.spec-other-input:focus {
  border-color: rgba(0, 195, 255, 0.48);
  outline: none;
}

.qfield input:not([type="checkbox"]):not([type="radio"]),
.qfield select,
.qfield textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
}

.qfield input:not([type="checkbox"]):not([type="radio"])::placeholder,
.qfield textarea::placeholder {
  color: var(--muted);
}

.qfield input:not([type="checkbox"]):not([type="radio"]):focus,
.qfield select:focus,
.qfield textarea:focus {
  border-color: rgba(0, 195, 255, 0.48);
  outline: none;
  box-shadow: none;
}

.choice-row {
  align-items: center;
  gap: 8px;
}

.chk-pill {
  min-height: 34px;
  padding: 6px 12px;
  border-color: rgba(255, 255, 255, 0.10);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  box-shadow: none;
}

.chk-pill:hover {
  border-color: rgba(0, 195, 255, 0.32);
  color: var(--text);
}

.chk-pill:has(input:checked) {
  border-color: rgba(0, 195, 255, 0.56);
  background: rgba(0, 195, 255, 0.10);
}

.qfield.required {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

.qfield label {
  align-items: flex-start;
}

.qfield label span {
  display: block;
  letter-spacing: 0;
  margin-top: 2px;
  text-align: right;
  text-transform: none;
}

.phase-list li {
  min-height: 54px;
}

.internal-list {
  display: grid;
  gap: 10px;
}

.internal-list article,
.spec-admin-group,
.spec-admin-group article {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
}

.internal-list article {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.internal-list p {
  margin: 0;
}

.spec-admin-toolbar {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 12px;
}

.spec-admin-builder {
  display: grid;
  gap: 12px;
}

.spec-admin-group {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.spec-admin-group > header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.spec-admin-group > header strong {
  margin-right: auto;
}

.mini-check {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 7px;
}

.spec-admin-group article {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  padding: 10px;
}

.spec-admin-group article[draggable="true"] {
  cursor: grab;
}

.drag-handle {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 8px;
}

.spec-output {
  max-height: calc(100vh - 230px);
  overflow: auto;
}

.ops-empty {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  color: var(--muted);
  font-size: 13px;
  padding: 14px;
}

.file-row[data-file-id],
.file-card[data-file-id],
.agenda [data-meeting-id],
.note[data-note-id],
.cal-day[data-work-date] {
  cursor: pointer;
}

.cal-day.is-selected {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel-2));
}

.cal-day.is-holiday em {
  color: var(--warning, #f6c96b);
}

.cal-day.is-day-off em {
  color: var(--success);
}

.note-editor-panel {
  width: min(1080px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: visible;
}

.note-editor-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.note-editor-grid label.full:has(input[name="title"]) {
  grid-column: 1 / -1;
}

.note-editor-grid label.full:has(textarea) {
  grid-column: span 2;
}

.note-editor-grid .note-checklist-editor.full {
  grid-column: span 2;
}

.note-editor-grid textarea[name="body"] {
  min-height: 150px;
  max-height: 210px;
  line-height: 1.45;
}

.task-title-edit label,
.task-detail-grid label,
.task-notes label {
  display: block;
}

.task-title-edit label,
.task-detail-grid label {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 10px;
}

.task-title-edit label b,
.task-detail-grid label b,
.task-notes label strong {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}

.task-title-edit input,
.task-detail-grid select,
.task-notes textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}

.task-title-edit input,
.task-detail-grid select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-notes textarea {
  min-height: 86px;
  resize: vertical;
}

.task-notes label + label {
  margin-top: 12px;
}

.task-subtasks {
  margin-top: 12px;
}

.task-notes .task-subtasks:first-child {
  margin-top: 0;
}

.task-notes .task-subtasks + label {
  display: block;
  margin-top: 12px;
}

.task-subtasks > strong {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}

.task-subtask-list {
  display: grid;
  gap: 7px;
}

.task-subtask-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.task-subtask-row input {
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.task-subtask-row span {
  min-width: 0;
  line-height: 1.35;
  word-break: break-word;
}

.task-subtask-row input:checked + span {
  color: var(--muted);
  text-decoration: line-through;
}

.task-subtask-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}

.task-subtask-add input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

.wi-modal-panel.client-360-panel {
  width: min(1320px, calc(100vw - 48px));
  max-height: min(820px, calc(100vh - 48px));
}

.client-360-hero {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.7fr);
  padding: 18px 20px 0;
}

.client-360-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}

.client-360-primary,
.client-360-grid article,
.client-360-lists section {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
  padding: 16px;
}

.client-360-primary {
  display: grid;
  align-content: start;
  gap: 10px;
}

.client-360-primary > p {
  margin-top: -4px;
}

.client-360-primary > span,
.client-360-grid span,
.client-360-lists h4 {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.client-360-primary strong,
.client-360-grid strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.client-360-grid p,
.client-360-lists p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.client-360-lists {
  display: block;
  padding: 12px 20px 18px;
}

.client-360-lists section {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: 360px;
  min-height: 250px;
  overflow: auto;
}

.client-360-lists section[hidden] {
  display: none;
}

.client-360-tabs {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 0;
}

.client-360-tab {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  line-height: 1;
  padding: 7px 14px;
}

.client-360-tab[data-active],
.client-360-tab:hover,
.client-360-tab:focus-visible {
  background: rgba(255, 255, 255, .055);
  border-color: var(--line-strong);
  color: var(--text);
  outline: none;
}

.client-360-tab span {
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 7px;
}

.client-360-lists .link {
  text-align: left;
}

.client-360-section-head,
.client-360-person-title,
.client-360-card-actions,
.client-360-primary-actions {
  align-items: center;
  display: flex;
}

.client-360-section-head,
.client-360-person-title {
  justify-content: space-between;
  gap: 10px;
}

.client-360-person-title > div:first-child {
  min-width: 0;
}

.client-360-section-head > strong {
  font-size: 13px;
}

.client-360-card-actions,
.client-360-primary-actions {
  gap: 6px;
}

.client-360-card-actions .icon-action {
  flex: 0 0 auto;
}

.client-360-primary-actions {
  margin-top: 2px;
}

.client-360-contacts-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.client-360-list-row,
.client-360-list-button {
  display: grid;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  color: var(--text);
  padding: 12px;
  text-align: left;
}

.client-360-contacts-wrap .client-360-list-row {
  width: auto;
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 320px;
}

.client-360-contact-chip[type="button"] {
  cursor: pointer;
  width: 100%;
}

.client-360-person-head {
  display: grid;
  gap: 3px;
}

.client-360-list-button:hover,
.client-360-list-button:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.client-360-list-row strong,
.client-360-list-button strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-360-list-row span,
.client-360-list-button span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: normal;
}

.client-360-contact-stack {
  display: grid;
  gap: 8px;
}

.client-360-contact-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  display: grid;
  gap: 10px;
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 44px;
  padding: 8px 10px;
  text-decoration: none;
}

.client-360-contact-chip .ic {
  background: rgba(0, 195, 255, .09);
  border: 1px solid rgba(0, 195, 255, .22);
  border-radius: 10px;
  color: var(--accent);
  height: 32px;
  padding: 7px;
  width: 32px;
}

.client-360-contact-chip span,
.client-360-contact-chip small,
.client-360-contact-chip strong {
  display: block;
  min-width: 0;
}

.client-360-contact-chip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.client-360-contact-chip strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-360-contact-chip:hover {
  border-color: rgba(0, 195, 255, .46);
}

.client-360-contact-chip.muted-chip {
  opacity: .62;
}

.client-360-lists p span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.tbl th[data-sortable] {
  cursor: pointer;
  user-select: none;
}

.tbl th[data-sortable]::after {
  content: "\2195";
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-size: 10px;
}

.tbl th[data-sort-active]::after {
  content: "\2191";
  color: var(--accent);
}

.tbl th[data-sort-active][data-sort-dir="desc"]::after {
  content: "\2193";
}

.note-checklist-editor {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.note-checklist-editor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
}

.note-checklist-editor header div {
  display: grid;
  gap: 3px;
}

.note-checklist-editor strong {
  font-size: 14px;
  font-weight: 600;
}

.note-checklist-editor span {
  color: var(--muted);
  font-size: 12px;
}

.note-checklist-list {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.note-check-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
}

.note-check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.note-check-row input[type="text"] {
  min-height: 32px;
}

.wi-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: 14px;
}

body:has(.wi-modal) {
  overflow: hidden;
}

.wi-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 11, 0.72);
  backdrop-filter: blur(8px);
}

.wi-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1240px, calc(100vw - 44px));
  max-height: min(900px, calc(100dvh - 44px));
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  color: var(--text);
  box-shadow: none;
}

.wi-modal-panel header,
.wi-modal-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.wi-modal-panel footer {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  flex-shrink: 0;
}

.wi-modal-panel footer .btn {
  white-space: nowrap;
}

.wi-modal-panel h3 {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}

.wi-modal-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.wi-modal-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px 12px;
  padding: 12px 16px;
}

.wi-modal-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wi-modal-grid label.full {
  grid-column: 1 / -1;
}

.wi-modal-grid .full {
  grid-column: 1 / -1;
}

.meeting-import-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

.meeting-import-toolbar span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.wi-modal-grid input,
.wi-modal-grid select,
.wi-modal-grid textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 86%, #000 14%);
  color: var(--text);
  padding: 7px 10px;
  outline: none;
  text-transform: none;
}

[data-variant="v3"] .wi-modal-grid input,
[data-variant="v3"] .wi-modal-grid select,
[data-variant="v3"] .wi-modal-grid textarea,
[data-variant="v3"] .admin-form input,
[data-variant="v3"] .admin-form select,
[data-variant="v3"] .admin-form textarea {
  background: #101014;
  border-color: rgba(255, 255, 255, .08);
}

[data-variant="v3"] .admin-module-checks input[type="checkbox"] {
  background: transparent;
}

.wi-modal-panel.admin-user-modal {
  width: min(1280px, calc(100vw - 44px));
}

.admin-user-modal .wi-modal-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-user-modal .wi-modal-grid label.full {
  grid-column: span 2;
}

.admin-user-modal .wi-modal-grid .admin-module-checks.full {
  grid-column: 1 / -1;
}

.wi-modal-grid textarea {
  resize: vertical;
  min-height: 70px;
  max-height: 150px;
  font-family: inherit;
}

.wi-modal-panel.project-form-modal {
  width: min(1120px, calc(100vw - 28px));
  max-height: calc(100dvh - 56px);
  overflow: visible;
}

.project-form-modal header {
  padding: 10px 16px 9px;
}

.project-form-modal footer {
  position: static;
  padding: 9px 16px;
  background: var(--panel);
}

.project-form-modal .wi-modal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px 12px;
  padding: 9px 16px;
}

.project-form-modal .wi-modal-grid label.full:not(:has(textarea)) {
  grid-column: span 2;
}

.project-form-modal .wi-modal-grid label.full:has(textarea) {
  grid-column: 1 / -1;
}

.project-form-modal .wi-modal-grid label {
  gap: 4px;
}

.project-form-modal .wi-modal-grid input,
.project-form-modal .wi-modal-grid select,
.project-form-modal .wi-modal-grid textarea {
  min-height: 33px;
  padding: 7px 10px;
  border-radius: 12px;
}

.project-form-modal .wi-modal-grid textarea {
  min-height: 116px;
  max-height: 116px;
  overflow-y: hidden;
}

.wi-modal-panel.project-form-modal .wi-modal-grid textarea[name="description"] {
  min-height: 132px !important;
  height: 132px !important;
  max-height: 132px !important;
  overflow-y: hidden !important;
  resize: none;
}

.wi-modal-panel.project-logo-crop-panel {
  width: min(760px, calc(100vw - 32px));
}

.project-logo-crop-body {
  display: grid;
  gap: 14px;
  padding: 16px 20px;
}

.project-logo-crop-stage {
  align-items: center;
  background: #0f1117;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  padding: 16px;
}

.project-logo-crop-canvas {
  aspect-ratio: 2 / 1;
  background: transparent;
  border-radius: 6px;
  display: block;
  max-width: 100%;
  width: 560px;
}

.project-logo-crop-controls {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-logo-crop-controls label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wi-modal-panel.meeting-editor-panel {
  width: min(1120px, calc(100vw - 44px));
}

.meeting-editor-panel .wi-modal-grid textarea[name="note"] {
  min-height: 74px;
  max-height: 120px;
}

.meeting-editor-panel .wi-modal-grid textarea[name="source_text"] {
  min-height: 76px;
  max-height: 130px;
}

.meeting-editor-panel .wi-modal-grid label.full:has(input[name="participants"]),
.meeting-editor-panel .wi-modal-grid label.full:has(input[name="meeting_link"]) {
  grid-column: span 2;
}

.wi-modal-panel.note-editor-panel {
  width: min(1080px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: visible;
}

.wi-modal-panel.note-editor-panel .wi-modal-grid.note-editor-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wi-modal-panel.note-editor-panel .note-editor-grid label.full:has(input[name="title"]) {
  grid-column: 1 / -1;
}

.wi-modal-panel.note-editor-panel .note-editor-grid label.full:has(textarea) {
  grid-column: span 2;
}

.wi-modal-panel.note-editor-panel .note-editor-grid .note-checklist-editor.full {
  grid-column: span 2;
}

.wi-modal-panel.note-editor-panel .note-editor-grid textarea[name="body"] {
  min-height: 150px;
  max-height: 210px;
  line-height: 1.45;
}

.mail-composer {
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: visible;
}

.mail-composer > header,
.mail-composer > footer {
  flex-shrink: 0;
}

.mail-composer > header {
  padding: 12px 16px;
}

.mail-composer > footer {
  position: static;
  background: var(--panel);
  padding: 10px 16px;
}

.mail-composer > .wi-modal-grid {
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 10px 16px;
}

.mail-composer .wi-modal-grid input,
.mail-composer .wi-modal-grid select {
  min-height: 34px;
}

.mail-composer .mail-compose-meta {
  gap: 10px;
}

.mail-composer .mail-editor-toolbar {
  margin-top: 2px;
  padding: 4px 8px;
}

.mail-composer .mail-editor {
  min-height: clamp(150px, 24vh, 250px);
  max-height: 28vh;
}

@media (min-width: 981px) and (max-height: 900px) {
  .wi-modal-panel {
    transform: scale(.94);
    transform-origin: center;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  .wi-modal-panel {
    transform: scale(.9);
  }
}

@media (min-width: 981px) and (max-height: 720px) {
  .wi-modal-panel {
    transform: scale(.84);
  }
}

.email-template-manager {
  width: min(920px, 100%);
}

.email-template-list {
  display: grid;
  gap: 10px;
  max-height: 310px;
  overflow: auto;
}

.email-template-item {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.email-template-item strong,
.email-template-item p {
  display: block;
}

.email-template-item strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
}

.email-template-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.form-actions.compact {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.mail-compose-meta {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  align-items: end;
}

.mail-compose-meta label {
  min-width: 0;
}

.mail-compose-meta label:last-child {
  min-width: 140px;
}

.mail-editor-wrap {
  /* wrapper for toolbar + editor — no transform */
}

.mail-editor-toolbar {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding: 6px 10px;
}

.mail-editor-toolbar .iconbtn,
.mail-editor-toolbar .mail-tb-btn {
  height: 30px;
  min-height: 30px;
  width: 30px;
  font-size: 13px;
  border-radius: 8px;
}

.mail-editor-toolbar .sv-tb-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 2px;
}

.mail-editor {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  min-height: 260px;
  outline: none;
  overflow: auto;
  padding: 14px;
  text-transform: none;
  white-space: normal;
  word-break: break-word;
}

.mail-editor hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}

.mail-editor:focus {
  border-color: rgba(0, 195, 255, 0.55);
}

.mail-editor-raw {
  display: none;
}

.mail-preview-link {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.mail-preview-link:hover {
  text-decoration: underline;
}

.wi-modal-grid input:focus,
.wi-modal-grid select:focus,
.wi-modal-grid textarea:focus {
  border-color: rgba(0, 195, 255, 0.55);
}

.ui-toast {
  position: fixed !important;
  right: 26px !important;
  bottom: 26px !important;
  z-index: 999 !important;
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(390px, calc(100vw - 36px)) !important;
  max-width: none !important;
  min-height: 54px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(0, 195, 255, 0.28) !important;
  border-radius: 15px !important;
  background: rgba(18, 19, 25, 0.98) !important;
  color: #f7fbff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 0 18px rgba(0, 195, 255, 0.16) !important;
  opacity: 0 !important;
  transform: translateY(10px) scale(0.98) !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.ui-toast::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #00c3ff;
  box-shadow: 0 0 8px rgba(0, 195, 255, 0.65);
}

.ui-toast[data-show] {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

[data-variant="v1"] .ui-toast {
  background: #ffffff !important;
  color: #061019 !important;
  border-color: rgba(0, 163, 224, 0.28) !important;
}

.chat-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100vh - 180px);
}

.chat-sidebar,
.chat-main {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
}

.chat-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.chat-side-block {
  display: grid;
  gap: 10px;
}

.chat-side-block header,
.chat-main-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.chat-head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.chat-side-block header span {
  color: var(--muted);
  font-size: 12px;
}

.chat-thread-list,
.chat-compact-list {
  display: grid;
  gap: 8px;
}

.chat-thread,
.chat-compact-list button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 12px;
  text-align: left;
}

.chat-item-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chat-avatar {
  margin-right: 0;
}

.chat-thread .chat-avatar,
.chat-compact-list .chat-avatar,
.chat-message .chat-avatar {
  color: #fff;
  grid-column: 1;
}

.chat-thread[data-active],
.chat-compact-list button[data-active] {
  border-color: rgba(0, 195, 255, 0.48);
  background: rgba(0, 195, 255, 0.08);
}

.chat-thread strong,
.chat-compact-list strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.chat-thread span,
.chat-compact-list span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placeholder sor (betöltés előtt): nincs avatar, span 2 oszlopot */
.chat-thread.is-placeholder {
  grid-template-columns: 1fr;
}
.chat-thread.is-placeholder strong,
.chat-thread.is-placeholder span {
  grid-column: 1 / -1;
}

.chat-thread .chat-avatar,
.chat-compact-list .chat-avatar,
.chat-message .chat-avatar {
  color: #fff;
  font-size: 9.5px;
  overflow: visible;
  white-space: normal;
}

.chat-main {
  display: grid;
  grid-template-rows: auto minmax(340px, 1fr) auto;
  min-width: 0;
  overflow: hidden;
}

.chat-main-head {
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.chat-main-head h3 {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  margin: 2px 0 4px;
}

.chat-main-head p {
  color: var(--muted);
  margin: 0;
}

.chat-messages {
  align-content: start;
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 20px;
}

.chat-message {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  max-width: min(760px, 92%);
}

.chat-message[data-own] {
  grid-template-columns: minmax(0, 1fr) 34px;
  justify-self: end;
}

.chat-message[data-own] .chat-avatar {
  grid-column: 2;
}

.chat-message[data-own] .chat-bubble {
  background: rgba(0, 195, 255, 0.12);
  border-color: rgba(0, 195, 255, 0.28);
  grid-column: 1;
  grid-row: 1;
}

.chat-bubble {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  padding: 12px 14px;
  position: relative;
}

.chat-message-delete {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  transition: opacity .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
  width: 28px;
}

.chat-bubble:hover .chat-message-delete,
.chat-message-delete:focus-visible {
  opacity: 1;
}

.chat-message-delete:hover,
.chat-message-delete:focus-visible {
  background: rgba(255, 91, 91, .10);
  border-color: rgba(255, 91, 91, .55);
  color: var(--danger);
}

.chat-bubble header {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  padding-right: 34px;
}

.chat-bubble header strong {
  font-weight: 600;
}

.chat-bubble time {
  color: var(--muted);
  font-size: 12px;
}

.chat-bubble p {
  margin: 0;
  white-space: pre-wrap;
}

.chat-file {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  display: inline-flex;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  text-decoration: none;
}

.chat-composer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 14px;
}

.chat-composer textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  min-height: 58px;
  padding: 12px 14px;
  resize: vertical;
}

.chat-composer-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.chat-attach {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 50px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  min-height: 40px;
  padding: 10px 20px;
}

.chat-attach input {
  display: none;
}

.project-access-checks {
  display: grid;
  gap: 10px;
  padding: 2px;
}

.project-access-checks label {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: flex;
  gap: 12px;
  padding: 12px;
}

.project-access-checks span {
  display: grid;
  gap: 3px;
}

.project-access-checks small {
  color: var(--muted);
}

.project-name-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.project-name-link:hover {
  color: var(--accent);
}

.project-detail-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 0;
}

.project-detail-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.project-detail-title-wrap {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.project-detail-title-wrap .project-logo {
  flex: 0 0 64px;
  height: 32px;
  width: 64px;
}

.project-detail-title-wrap h3 {
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.project-detail-title-wrap p,
.project-detail-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
}

.project-detail-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.project-detail-card .mile {
  display: grid;
  gap: 8px;
  overflow: visible;   /* nincs csúszka */
  padding-right: 4px;
}

.project-detail-card .mile li {
  align-items: center;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 22px minmax(0, 1fr) auto 28px;
  min-height: 46px;
  padding: 9px 10px;
}

.project-detail-card .mile li.done {
  background: rgba(48, 209, 88, .055);
}

.project-detail-card .mile li.active {
  background: rgba(0, 174, 239, .07);
  border-color: rgba(0, 174, 239, .22);
}

.project-mile-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-detail-card .mile li b {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-mile-copy small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.project-detail-card .mile li.done .project-mile-copy small {
  color: var(--success);
}

.project-detail-card .mile li.active .project-mile-copy small {
  color: var(--accent);
}

.project-detail-card .mile li time {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  padding: 4px 8px;
}

.project-detail-card .mile li .project-mile-delete {
  height: 28px;
  opacity: .72;
  width: 28px;
}

.project-detail-card .mile li .project-mile-delete:hover {
  opacity: 1;
}

.project-mile-check {
  display: inline-flex;
}

.project-mile-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-mile-check span {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.project-mile-check input:checked + span {
  background: var(--success);
  border-color: var(--success);
}

.project-mile-check input:checked + span::after {
  content: "";
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 8px;
  transform: rotate(45deg) translate(-1px, -1px);
  width: 4px;
}

.project-360-grid {
  align-items: start;
  grid-auto-rows: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-360-grid > .project-detail-card {
  align-self: start;
}

.project-360-grid > .project-detail-card:last-child:nth-child(4n + 1) {
  grid-column: 1 / -1;
}

.project-360-grid > .project-detail-card:nth-last-child(2):nth-child(4n + 1),
.project-360-grid > .project-detail-card:last-child:nth-child(4n + 2) {
  grid-column: span 2;
}

.project-360-grid > .project-detail-card:nth-last-child(3):nth-child(4n + 1) {
  grid-column: span 2;
}

.project-detail-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  min-width: 0;
  padding: 14px;
}

.project-detail-card h3 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.project-card-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.project-card-open {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
}

.project-card-open:hover,
.project-card-open:focus-visible {
  background: var(--panel-2);
  color: var(--text);
}

.project-info-list {
  display: grid;
  gap: 8px;
}

.project-info-list span {
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.project-info-list b,
.project-info-list i {
  display: block;
  font-style: normal;
}

.project-info-list b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-info-list i {
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-detail-card .mail-list,
.project-detail-card .file-list {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.project-detail-card .mail-list li,
.project-detail-card .file-list li {
  align-items: flex-start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  transition: background-color .14s ease, border-color .14s ease;
}

.project-detail-card .mail-list li:first-child,
.project-detail-card .file-list li:first-child,
.project-detail-card .mail-list li,
.project-detail-card .file-list li {
  border-top: 1px solid transparent;
}

.project-detail-card .mail-list li[data-clickable]:hover,
.project-detail-card .file-list li[data-clickable]:hover {
  background: rgba(255, 255, 255, .035);
  border-color: var(--line);
}

.project-detail-card .mail-list div,
.project-detail-card .file-list div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-detail-card .mail-list span,
.project-detail-card .file-list span:not(.filetag) {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-info-modal {
  width: min(880px, calc(100vw - 32px));
}

.project-info-modal-body {
  display: grid;
  gap: 14px;
  max-height: min(68vh, 720px);
  overflow: auto;
  padding: 2px;
}

.project-popup-list {
  display: grid;
  gap: 12px;
}

.project-popup-list article {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: grid;
  gap: 8px;
  padding: 14px;
}

.project-popup-list h4 {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.project-popup-list article > span,
.project-popup-lines {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.project-popup-lines p {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.project-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.project-text-view {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 0 0;
  max-height: 440px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.project-popup-checklist {
  color: var(--text);
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-version-panel {
  width: min(920px, calc(100vw - 36px));
}

.file-version-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.file-version-current {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.file-version-current h4 {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.file-version-current p {
  margin: 5px 0 0;
}

.file-version-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.file-version-grid span {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
}

.file-version-grid span.full {
  grid-column: 1 / -1;
}

.file-version-grid b,
.file-version-grid i {
  display: block;
  font-style: normal;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-version-grid b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.file-version-grid i {
  color: var(--text);
  font-size: 13px;
}

.file-version-list {
  display: grid;
  gap: 10px;
}

.file-version-list-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.file-version-list-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.file-version-list-head small {
  color: var(--muted);
  font-size: 12px;
}

.file-version-item {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) auto auto auto;
  padding: 12px;
}

.file-version-item.is-current {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel-2));
}

.file-version-item div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.file-version-item strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-version-item span:not(.file-icon) {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-version-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

[data-variant="v3"] .project-detail-card {
  background: rgba(255, 255, 255, .025);
}

.tbl tbody tr[data-row-open],
.tbl tbody tr[data-selected],
.tbl tbody tr[data-clickable][data-selected],
.task-list-table tr[data-selected] {
  background: rgba(15, 23, 42, .055) !important;
  box-shadow: inset 3px 0 0 rgba(100, 116, 139, .85);
}

[data-variant="v3"] .tbl tbody tr[data-row-open],
[data-variant="v3"] .tbl tbody tr[data-selected],
[data-variant="v3"] .tbl tbody tr[data-clickable][data-selected],
[data-variant="v3"] .task-list-table tr[data-selected] {
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 3px 0 0 rgba(154, 154, 168, .75);
}

/* ================================================================
   RESPONSIVE — comprehensive mobile/small-screen rules
   Breakpoints: 1180px, 960px, 768px (mobile), 480px (very small)
   ================================================================ */

/* --- Mobile hamburger button (hidden on desktop) --- */
.mobile-menu-btn { display: none; }

/* --- Table overflow wrapper: explicit opt-in for tables needing scroll --- */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 1180px — already handled in workspace.css; add refinements --- */
@media (max-width: 1180px) {
  .client-360-hero {
    grid-template-columns: 1fr;
  }
  .client-360-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-360-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-360-grid > .project-detail-card:last-child:nth-child(4n + 1),
  .project-360-grid > .project-detail-card:nth-last-child(2):nth-child(4n + 1),
  .project-360-grid > .project-detail-card:last-child:nth-child(4n + 2),
  .project-360-grid > .project-detail-card:nth-last-child(3):nth-child(4n + 1) {
    grid-column: span 1;
  }
  .file-version-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 960px --- */
@media (max-width: 960px) {
  .chat-shell {
    grid-template-columns: 1fr;
  }
  .chat-sidebar {
    display: none;
  }
  .client-360-grid {
    grid-template-columns: 1fr;
  }
  .note-editor-grid {
    grid-template-columns: 1fr;
  }
  .wi-modal-grid {
    grid-template-columns: 1fr;
  }
  .wi-modal-grid label.full,
  .wi-modal-grid .full {
    grid-column: 1;
  }
  .mail-compose-meta {
    grid-template-columns: 1fr;
  }
  .mail-compose-meta label:last-child {
    min-width: 0;
  }
}

/* --- 880px — mobile breakpoint (sidebar hidden) --- */
@media (max-width: 880px) {
  /* Show hamburger, hide sidebar by default */
  .mobile-menu-btn {
    display: inline-flex;
    flex-shrink: 0;
  }

  /* Slide-in sidebar overlay */
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    width: 240px !important;
    transform: translateX(-100%);
    transition: transform .22s ease, box-shadow .22s ease;
    box-shadow: none;
    overflow-y: auto;
  }

  .app.mobile-sidebar-open .sidebar {
    display: flex !important;
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .45);
  }

  /* Dark overlay behind sidebar */
  .app.mobile-sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(3, 6, 11, .55);
    backdrop-filter: blur(2px);
  }

  /* Page header: stack title + actions vertically */
  .page-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-head-actions {
    flex-wrap: wrap;
  }

  /* Top-tools: shrink search */
  .search { width: 160px !important; }

  /* Tables: horizontal scroll */
  .data,
  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tbl {
    min-width: 560px;
  }

  /* Modals: full width with small margin */
  .wi-modal {
    padding: 12px;
    align-items: flex-end;
  }
  .wi-modal-panel,
  .mail-composer,
  .email-template-manager,
  .note-editor-panel,
  .wi-modal-panel.client-360-panel,
  .project-info-modal,
  .file-version-panel,
  .spec-version-modal {
    width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto;
    border-radius: 15px 15px 0 0 !important;
  }

  /* Client 360 modal */
  .client-360-hero {
    padding: 14px 14px 0;
  }
  .client-360-tabs {
    padding: 12px 14px 0;
  }
  .client-360-lists {
    padding: 10px 14px 14px;
  }

  /* Project grid */
  .project-360-grid {
    grid-template-columns: 1fr;
  }
  .project-360-grid > .project-detail-card:last-child:nth-child(4n + 1),
  .project-360-grid > .project-detail-card:nth-last-child(2):nth-child(4n + 1),
  .project-360-grid > .project-detail-card:last-child:nth-child(4n + 2),
  .project-360-grid > .project-detail-card:nth-last-child(3):nth-child(4n + 1) {
    grid-column: span 1;
  }

  /* Project detail head: stack */
  .project-detail-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* File version grid */
  .file-version-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Chat: show only main on mobile */
  .chat-shell {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 120px);
  }

  /* Mail: spec-admin-tree articles already handled */

  /* Spec writer: collapse left panel */
  .sv-layout { flex-direction: column; }
  .sv-left { width: 100%; max-width: none; height: 220px; border-right: none; border-bottom: 1px solid var(--line); }

  /* Page-size control: hide label on small screens */
  .page-size-control > span:first-child { display: none; }

  /* Mini form: single column */
  .mini-form { grid-template-columns: 1fr !important; }

  /* Admin summary: already 1 col in workspace.css at 880px */

  /* Agenda / meetings list */
  .meet-table-wrap { overflow-x: auto; }

  /* Inbox layout: already 1 col in workspace.css, ensure mail tools wrap */
  .mail-tools {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Search results dropdown: full width */
  .search-results {
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* --- 480px — very small screens --- */
@media (max-width: 480px) {
  /* Page heading */
  .page-title { font-size: 18px; }

  /* Top tools */
  .search { display: none; }
  .timer-clock { display: none; }
  .timer-context { max-width: 110px; }

  /* Modals become truly full-screen */
  .wi-modal {
    padding: 0;
    align-items: stretch;
  }
  .wi-modal-panel,
  .mail-composer,
  .email-template-manager,
  .note-editor-panel,
  .wi-modal-panel.client-360-panel,
  .project-info-modal,
  .file-version-panel,
  .spec-version-modal {
    max-height: 100vh !important;
    overflow-y: auto;
    border-radius: 0 !important;
  }

  /* File version grid: single column */
  .file-version-grid { grid-template-columns: 1fr; }

  /* Contacts wrap: full-width cards */
  .client-360-contacts-wrap .client-360-list-row {
    max-width: none;
    flex: 1 1 100%;
  }

  /* Spec admin questions: compact */
  .spec-admin-group article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .spec-admin-group article .iconbtn:not(:last-child) { display: none; }

  /* Form actions: stack on very small */
  .form-actions,
  .form-actions.compact {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions button,
  .form-actions.compact button,
  .form-actions a {
    width: 100%;
    justify-content: center;
  }
}

.tbl tbody tr[data-clickable][data-selected] td,
.tbl tbody tr[data-selected] td,
.task-list-table tr[data-selected] td {
  background: transparent !important;
}

.tbl tbody tr[data-row-open] .link,
.tbl tbody tr[data-selected] .link {
  color: var(--muted);
}

/* Egységes natív űrlap-kontrollok: select/date ikonok és dark-mode felületek. */
select,
.timer-context {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23687587' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 10px;
  padding-right: 44px;
}

[data-variant="v3"] select,
[data-variant="v3"] .timer-context {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%238898b4' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  color-scheme: dark;
}

.timer .timer-context,
[data-variant="v3"] .timer .timer-context {
  background-color: transparent !important;
  border-left-color: rgba(255, 255, 255, .08);
  box-shadow: none;
}

select,
select.select,
.wi-modal-grid select,
.form-grid select,
.mini-form select,
.admin-form select,
.qfield select,
.task-detail-grid select,
.timer-context {
  background-position: right 16px center !important;
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  padding-right: 44px !important;
}

[data-variant="v3"] .timer:not([data-running]) .timer-btn {
  color: #ff5b5b;
}

[data-variant="v3"] .timer[data-running] .timer-btn {
  color: var(--accent);
}

[data-variant="v3"] .timer:not([data-running]) .timer-btn .ic {
  filter:
    drop-shadow(0 0 3px rgba(255, 91, 91, .76))
    drop-shadow(0 0 8px rgba(255, 91, 91, .34));
}

[data-variant="v3"] .timer[data-running] .timer-btn .ic {
  filter:
    drop-shadow(0 0 4px rgba(0, 174, 239, .75))
    drop-shadow(0 0 10px rgba(0, 174, 239, .35));
}

.timer[data-running] .timer-ic-play {
  display: block !important;
}

.timer[data-running] .timer-ic-stop {
  display: none !important;
}

.timer:not([data-running]) .timer-ic-stop {
  display: block !important;
}

.timer:not([data-running]) .timer-ic-play {
  display: none !important;
}

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
  color-scheme: light;
  padding-right: 44px;
}

.btn,
.btn.xs,
.row-actions .btn.xs,
.form-actions .btn,
.page-head-actions .btn,
.admin-actions .btn,
.devlog-item-actions .btn,
.devlog-form button[type="submit"],
.chat-attach {
  font-size: var(--wdesk-button-font-size, 14px) !important;
  min-height: 32px !important;
  padding: 5px 20px !important;
}

.ui-settings-form {
  grid-template-columns: repeat(2, minmax(0, 240px));
}

.sync-settings-form,
.admin-form:has([data-admin-ics-interval]) {
  grid-template-columns: minmax(220px, 320px) minmax(320px, 1fr);
}

.sync-settings-form + p,
.admin-form:has([data-admin-ics-interval]) + p {
  display: none;
}

.sync-rule-card {
  align-self: stretch;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--muted);
  display: grid;
  gap: 5px;
  min-height: 40px;
  padding: 11px 14px;
}

.sync-rule-card strong {
  color: var(--text);
  font-size: 13px;
}

.sync-rule-card span {
  font-size: 12px;
  line-height: 1.35;
}

.admin-form label.chk,
.ui-settings-form label.chk {
  align-items: center;
  color: var(--text);
  flex-direction: row;
  font-size: 12.5px;
  gap: 8px;
  justify-content: flex-start;
  letter-spacing: 0;
  min-height: 24px;
  padding: 0;
  text-transform: none;
}

.admin-form label.chk input[type="checkbox"],
.ui-settings-form label.chk input[type="checkbox"] {
  accent-color: var(--accent);
  appearance: auto;
  flex: 0 0 16px;
  height: 16px !important;
  margin: 0;
  min-height: 16px !important;
  padding: 0;
  width: 16px !important;
}

.admin-form label.chk span,
.ui-settings-form label.chk span {
  font-weight: 600;
  line-height: 1.25;
}

.ui-branding-form {
  grid-template-columns: minmax(260px, 520px);
  margin-bottom: 14px;
}

.ui-branding-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.ui-branding-grid article {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 54px auto;
  padding: 12px;
}

.ui-branding-grid strong,
.ui-branding-grid span {
  display: block;
}

.ui-branding-grid span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-branding-grid img {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  height: 44px;
  object-fit: contain;
  padding: 6px;
  width: 54px;
}

.ui-settings-preview {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 18px;
}

.ui-settings-preview strong,
.ui-settings-preview span {
  display: block;
}

.ui-settings-preview span {
  color: var(--muted);
  margin-top: 4px;
}

.ui-settings-preview-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .ui-branding-grid {
    grid-template-columns: 1fr;
  }
}

[data-variant="v3"] input[type="date"],
[data-variant="v3"] input[type="datetime-local"],
[data-variant="v3"] input[type="month"],
[data-variant="v3"] input[type="time"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .7;
}

[data-variant="v3"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-variant="v3"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-variant="v3"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-variant="v3"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: .78;
}

[data-variant="v3"] * {
  scrollbar-color: #5c5c68 #111116;
}

[data-variant="v3"] *::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

[data-variant="v3"] *::-webkit-scrollbar-track {
  background: #111116;
}

[data-variant="v3"] *::-webkit-scrollbar-thumb {
  background: #50505b;
  border: 3px solid #111116;
  border-radius: 999px;
}

[data-variant="v3"] *::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

@media (max-width: 980px) {
  .pages {
    padding: 18px;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .chat-shell {
    grid-template-columns: 1fr;
  }

  .chat-main {
    min-height: 620px;
  }

  .page-head-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .wi-modal-grid {
    grid-template-columns: 1fr;
  }

  .wi-modal-panel header,
  .wi-modal-panel footer {
    flex-direction: column;
  }

  .project-360-grid {
    grid-template-columns: 1fr;
  }

  .project-360-grid > .project-detail-card {
    grid-column: auto;
  }

  .client-360-hero,
  .client-360-grid,
  .client-360-lists {
    grid-template-columns: 1fr;
  }

  .project-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .file-version-grid {
    grid-template-columns: 1fr;
  }

  .file-version-item {
    align-items: flex-start;
    grid-template-columns: 44px minmax(0, 1fr);
  }

.file-version-item em,
  .file-version-item .btn {
    grid-column: 2;
    justify-self: flex-start;
  }
}

/* Segmented control (card/list toggle) */
.segmented {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.segmented button {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 12px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.segmented button:hover {
  color: var(--text);
}

.segmented button[data-active] {
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  color: var(--text);
  font-weight: 600;
}

.notes-view-switch {
  min-height: 34px;
}

.notes-grid.notes-grid-list {
  display: block;
}

.notes-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.notes-table-head,
.notes-table-row {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 34px minmax(220px, 1.4fr) minmax(160px, .9fr) minmax(130px, .75fr) 130px auto;
}

.notes-table-head {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 14px;
  text-transform: uppercase;
}

.notes-table-row {
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 12px 14px;
}

.notes-table-row strong,
.notes-table-row span {
  display: block;
}

.notes-table-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.notes-table-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.notes-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .notes-table-head {
    display: none;
  }

  .notes-table-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .notes-table-row > *:not(.notes-row-actions):not(input) {
    grid-column: 2;
  }

  .notes-row-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 1280px) {
  .page[data-page="attendance"] .manual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page[data-page="attendance"] .mini-form {
    grid-template-columns: 1fr;
  }

  .page[data-page="attendance"] .mini-form > label:nth-child(5),
  .page[data-page="attendance"] .mini-form > label:nth-child(6),
  .page[data-page="attendance"] .mini-form > button {
    grid-column: 1;
  }

  .page[data-page="attendance"] .mini-form > button {
    justify-self: stretch;
  }
}

/* ── Global overflow / layout containment fixes ──────────────────────────── */
/* Prevent any page from causing a horizontal scrollbar in .main */
.pages,
.page {
  min-width: 0;
  max-width: 100%;
}

/* Calendar grid: use minmax(0,1fr) so cells can shrink below content width */
.cal-row-h,
.cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Page-head title must not push head wider than viewport */
.page-head {
  min-width: 0;
}

.page-head-actions {
  min-width: 0;
  flex-shrink: 0;
}

/* Toolbar wrappers on list pages */
.data-toolbar,
.file-toolbar,
.mail-tools {
  flex-wrap: wrap;
  min-width: 0;
}

/* Tables: prevent wide tables from creating layout overflow */
.data,
.tbl-wrap {
  max-width: 100%;
}


/* ============================================================
   SPEC WRITER v2  -  .sv-* component styles
   ============================================================ */

/* Page layout override */
.page[data-page="spec"][data-active] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

/* Topbar */
.sv-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 50px;
  min-height: 50px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sv-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}
.sv-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.sv-topbar-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Title input */
.sv-title-input {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  width: 220px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: background .15s;
}
.sv-title-input:hover { background: var(--panel-2); }
.sv-title-input:focus { background: var(--panel-2); outline: 1.5px solid var(--accent); }

/* Save state */
.sv-save-state,
.sv-doc-save-state {
  font-size: 11px;
  color: var(--muted-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.sv-save-state.saving, .sv-doc-save-state.saving { color: var(--accent); }
.sv-save-state.saved,  .sv-doc-save-state.saved  { color: var(--success); }
.sv-save-state.error,  .sv-doc-save-state.error  { color: var(--danger); }

/* Section nav – prev / counter+title+dropdown / next */
.sv-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
.sv-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .1s, color .1s, border-color .1s;
}
.sv-nav-arrow:hover:not(:disabled) { background: var(--panel-2); color: var(--text); border-color: var(--line-strong); }
.sv-nav-arrow:disabled { opacity: .35; cursor: not-allowed; }
.sv-nav-arrow .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-nav-mid { position: relative; flex: 1; min-width: 0; }
.sv-nav-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, background .1s;
  white-space: nowrap;
  overflow: hidden;
}
.sv-nav-label:hover { border-color: var(--accent); background: var(--panel); }
.sv-nav-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sv-nav-text { flex: 1; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.sv-nav-chevron { width: 14px; height: 14px; stroke: var(--muted-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sv-nav-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 5px;
  max-height: 300px;
  overflow-y: auto;
}
.sv-nav-drop[hidden] { display: none; }
.sv-drop-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text); transition: background .1s; }
.sv-drop-item:hover { background: var(--panel-2); }
.sv-drop-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sv-drop-pos { font-size: 11px; color: var(--muted-2); min-width: 20px; flex-shrink: 0; }

/* Two-column layout */
.sv-layout {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Left panel */
.sv-left {
  width: 370px;
  min-width: 280px;
  max-width: 430px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

/* CRM bar */
.sv-crm-bar {
  padding: 7px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sv-crm-info { font-weight: 600; color: var(--text); }
.sv-crm-email { color: var(--muted); }
.sv-badge-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Questions panel */
.sv-questions {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sv-loading { padding: 20px 0; text-align: center; }

.sv-sec-header { margin-bottom: 12px; }
.sv-sec-header h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.sv-sec-intro { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* Individual question */
.sv-question { margin-bottom: 14px; }
.sv-q-hidden { display: none; }
.sv-q-flash { animation: sv-q-highlight .8s ease; }
@keyframes sv-q-highlight {
  0%   { background: var(--accent-soft); border-radius: var(--radius-sm); }
  100% { background: transparent; }
}
.sv-q-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.3;
}
.sv-req { color: var(--danger); font-weight: 700; transition: color .2s; }

/* Required field completed — turn label green */
.sv-question.sv-q-done .sv-req {
  color: var(--success);
}
.sv-question.sv-q-done .sv-req::before {
  content: '✓ ';
  font-size: 11px;
}
.sv-question.sv-q-done .sv-req::after {
  content: '' !important;
}
.sv-question.sv-q-done .sv-q-label {
  color: var(--success);
}
.sv-badge-int {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand);
  margin-left: auto;
}
/* Admin tree – static block badge */
.spec-badge-static {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: color-mix(in srgb, var(--success, #22c55e) 15%, transparent);
  color: var(--success, #22c55e);
  margin-right: 4px;
  vertical-align: middle;
}

/* Form controls */
.sv-input,
.sv-textarea,
.sv-select {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  font-family: inherit;
}
.sv-input:focus, .sv-textarea:focus, .sv-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.sv-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.sv-select { cursor: pointer; }

/* Radio/checkbox groups */
.sv-opts { display: flex; flex-direction: column; gap: 4px; }
.sv-opt-label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  transition: background .1s;
  border: 1px solid transparent;
}
.sv-opt-label:hover { background: var(--panel-2); }
.sv-opt-label input[type="radio"],
.sv-opt-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.sv-opt-label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* Custom "Egyeb" input */
.sv-custom-wrap { margin-top: 4px; margin-left: 26px; display: flex; align-items: center; gap: 6px; }
.sv-custom-wrap[hidden] { display: none !important; }
.sv-custom-input { flex: 1; min-width: 0; box-sizing: border-box; }
.sv-custom-ok { flex-shrink: 0; height: 30px; padding: 0 10px; font-size: 12px; }

/* Missing data – document block (last block in right panel) */
.sv-missing-doc {
  margin-top: 32px;
  padding: 14px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--warning) 60%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 6%, transparent);
  user-select: none;
}
.sv-missing-doc-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 10px;
}
.sv-missing-doc-head .ic {
  width: 16px; height: 16px;
  stroke: var(--warning); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.sv-missing-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sv-missing-doc-list li { display: contents; }
.sv-missing-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  cursor: pointer;
  text-decoration: none;
  transition: background .1s;
}
.sv-missing-link:hover { background: color-mix(in srgb, var(--warning) 22%, transparent); }

/* Right panel */
.sv-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

/* Toolbar */
.sv-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sv-tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background .1s, color .1s;
}
.sv-tb-btn:hover { background: var(--panel-2); color: var(--text); }
.sv-tb-btn.active { background: var(--accent-soft); color: var(--accent); }
.sv-tb-btn .ic {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sv-tb-italic { font-style: italic; }
.sv-tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; flex-shrink: 0; }
.sv-tb-format {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer; outline: none;
}
.sv-tb-format:focus { border-color: var(--accent); }
.sv-tb-spacer { flex: 1; }

/* Document editor */
.sv-document {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 32px 36px 32px 28px;
  outline: none;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.sv-document:empty::before,
.sv-document[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-2);
  pointer-events: none;
  font-style: italic;
}
.sv-document h1 { font-size: 20px; font-weight: 700; margin: 16px 0 6px; }
.sv-document h2 { font-size: 16px; font-weight: 700; margin: 14px 0 5px; }
.sv-document h3 { font-size: 14.5px; font-weight: 700; margin: 10px 0 4px; }
.sv-document p  { margin: 0 0 5px; }
.sv-document ul, .sv-document ol { margin: 0 0 6px; padding-left: 20px; }
.sv-document li { margin-bottom: 2px; }
.sv-document a  { color: var(--accent); text-decoration: underline; }

/* Technical document blocks kept visually as flowing text */
.sv-block {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
  transition: background .2s, box-shadow .2s;
}
/* Blocks WITH a heading get only prose-like spacing. */
.sv-block:has(.sv-block-h) { margin-top: 12px; margin-bottom: 4px; }
.sv-block:first-child { margin-top: 0; }
.sv-block:hover { background: transparent; }
.sv-block-edited { box-shadow: inset 2px 0 0 var(--accent); padding-left: 10px; }
.sv-block[data-orphaned="true"] { opacity: .55; box-shadow: inset 2px 0 0 var(--warning); padding-left: 10px; }
.sv-section-heading {
  margin-top: 28px;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.sv-section-heading:hover { border: 0; background: transparent; }
.sv-section-heading:first-child { margin-top: 0; }
.sv-section-heading .sv-block-h {
  font-size: 17px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.sv-section-heading .sv-block-body { display: none; }

/* Block heading (h3 inside the doc, non-editable) */
.sv-block-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 3px;
  user-select: none;
  cursor: default;
}

/* Small dot indicating manual edit */
.sv-edited-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ↖ relink button (jumps to left-panel question) */
.sv-block-relink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 13px;
  opacity: 0;
  transition: opacity .15s, background .1s, color .1s;
  flex-shrink: 0;
}
.sv-block:hover .sv-block-relink { opacity: 1; }
.sv-block-relink:hover { background: var(--accent-soft); color: var(--accent); }

/* Editable prose area */
.sv-block-body {
  outline: none;
  min-height: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.sv-block-body p { margin: 0 0 5px; }
.sv-block-body p:last-child,
.sv-block-body ul:last-child,
.sv-block-body ol:last-child { margin-bottom: 0; }

/* Flash highlight on new/updated block */
@keyframes sv-block-glow {
  0%   { background: var(--accent-soft); }
  70%  { background: var(--accent-soft); }
  100% { background: transparent; }
}
.sv-block-flash { animation: sv-block-glow 1s ease forwards; }

/* Document picker */
.sv-doc-picker {
  position: absolute;
  top: 50px;
  right: 12px;
  width: min(620px, calc(100vw - 48px));
  max-height: min(70vh, 620px);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}
.sv-doc-picker[hidden] { display: none; }
.sv-doc-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  flex-shrink: 0;
}
.sv-doc-picker-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.sv-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
  transition: background .1s;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.sv-picker-item:hover { background: var(--field); border-color: var(--accent); }
.sv-picker-item-meta { font-size: 11px; font-weight: 400; color: var(--muted-2); }
.sv-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
}
.sv-picker-row .sv-picker-item { flex: 1; }
.sv-picker-docx { flex-shrink: 0; font-size: 11px; padding: 2px 8px; height: 26px; }
.sv-picker-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.sv-picker-actions .btn,
.sv-picker-row > .sv-picker-docx {
  justify-content: center;
  min-width: 78px;
}

/* Responsive */
@media (max-width: 900px) {
  .sv-left { width: 300px; min-width: 240px; }
  .sv-document { padding: 18px 20px; }
  .sv-title-input { width: 160px; }
}
@media (max-width: 680px) {
  .sv-topbar { flex-wrap: wrap; height: auto; padding: 6px 10px; }
  .sv-section-nav { order: 3; width: 100%; flex: none; }
  .sv-layout { flex-direction: column; }
  .sv-left { width: 100%; max-width: none; height: 260px; border-right: none; border-bottom: 1px solid var(--line); }
}

/* ============================================================ */
/* Email app layout                                             */
/* ============================================================ */
.mail-app {
  display: grid;
  grid-template-columns: 190px 1fr 1.6fr;
  gap: 0;
  flex: 1 1 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* Sidebar */
.mail-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 10px 0 12px;
  gap: 2px;
  overflow-y: auto;
}
.mail-folder {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .12s, color .12s;
}
.mail-folder .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mail-folder span { flex: 1; font-weight: 500; }
.mail-folder:hover { background: var(--panel-2); color: var(--text); }
.mail-folder[data-active] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mail-folder-badge { display: none; font-size: 10px; font-style: normal; font-weight: 700; background: var(--accent); color: #fff; border-radius: 10px; padding: 1px 6px; min-width: 18px; text-align: center; }
.mail-folder-badge:not(:empty) { display: inline-block; }
.mail-folder[data-active] .mail-folder-badge { background: var(--accent); }
.mail-sidebar-sep { height: 1px; background: var(--line); margin: 8px 0; }
.mail-sidebar-search { padding: 4px 10px 2px; display: flex; flex-direction: column; gap: 5px; }
.mail-sidebar-search .search { width: 100%; }
.mail-sidebar-search .select { width: 100%; font-size: 11.5px; }
.mail-result-meta { display: block; padding: 4px 14px 0; font-size: 11px; color: var(--muted-2); }
.mail-label-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 12px 6px 14px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mail-label-add,
.mail-label-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.mail-label-add {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
}
.mail-label-add:hover,
.mail-label-mini:hover { border-color: var(--accent); color: var(--accent); }
.mail-label-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mail-label-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
}
.mail-label-row .mail-folder {
  min-width: 0;
  padding-right: 8px;
}
.mail-label-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.mail-label-icon svg,
.mail-label-mini svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mail-label-mini {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  opacity: .45;
}
.mail-label-row:hover .mail-label-mini { opacity: 1; }
.mail-label-empty {
  margin: 3px 14px;
  color: var(--muted-2);
  font-size: 11.5px;
}
.mail-label-pill {
  display: inline-flex;
  align-items: center;
  max-width: 120px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}

/* Center: email list */
.mail-list-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
/* override old .mail-list styles for the new layout */
.mail-app .mail-list {
  flex: 1 1 0;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  background: transparent;
}
.mail-app .mail-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
  align-items: start;
}
.mail-app .mail-list article:last-child { border-bottom: 0; }
.mail-app .mail-list article:hover { background: var(--panel-2); }
.mail-app .mail-list article[data-active] { background: var(--accent-soft); }
.mail-app .mail-list article.is-unread strong { font-weight: 800; }
.mail-app .mail-list article.is-unread span { color: var(--text); }
.mail-app .mail-list article.is-flagged { box-shadow: inset 3px 0 0 var(--accent); }
.mail-flag-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--accent);
  vertical-align: 1px;
}
.mail-app .mail-list [data-mail-select] {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 15px;
  height: 15px;
  margin: 0 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.mail-app .mail-list strong { font-size: 12.5px; font-weight: 600; color: var(--text); grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-app .mail-list span { font-size: 11.5px; color: var(--muted); grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-app .mail-list time { font-size: 10.5px; color: var(--muted-2); grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.mail-app .mail-list .mail-empty { grid-template-columns: 1fr; gap: 4px; }
.mail-app .mail-list .mail-empty strong,
.mail-app .mail-list .mail-empty span { grid-column: 1; }
.mail-app .mail-pagination {
  border-top: 1px solid var(--line);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  flex-shrink: 0;
  font-size: 12px;
  background: var(--panel);
  min-height: 36px;
}
.mail-app .mail-pagination [data-mail-page-info] { white-space: nowrap; flex-shrink: 0; }
.mail-app .mail-pagination .page-btns {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.mail-page-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.mail-page-select-wrap .select {
  width: 100px;
  min-width: 90px;
  min-height: 31px;
  padding: 6px 28px 6px 8px;
}

/* Mail list col: minimum szélesség hogy ne szűkítsük el a lapozót */
.mail-list-col {
  min-width: 280px;
}

/* Right: email view */
.mail-view {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
}
.mail-view-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted-2);
  font-size: 13px;
}
.mail-view-empty[hidden] { display: none !important; }
.mail-view-empty .ic { width: 40px; height: 40px; stroke: var(--muted-2); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.mail-view-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.mail-view-content[hidden] { display: none !important; }
.mail-view-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mail-view-subject { font-size: 18px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.mail-view-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-view-meta .badge { flex-shrink: 0; }
.mail-view-meta [data-mail-meta] { font-size: 12px; color: var(--muted); }
.mail-view-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mail-view-body { flex: 0 0 auto; padding: 0; font-size: 13.5px; line-height: 1.65; color: var(--text); word-break: break-word; min-height: 80px; }

.mail-text-body {
  white-space: pre-wrap;
  word-break: break-word;
}

.mail-html-body {
  color: var(--text);
  word-break: break-word;
}

.mail-html-body :is(p, div, blockquote, ul, ol, table, pre) {
  margin: 0 0 10px;
}

.mail-html-body :is(h1, h2, h3, h4) {
  margin: 14px 0 8px;
}

.mail-html-body a {
  color: var(--accent);
  text-decoration: underline;
}

.mail-html-body table {
  border-collapse: collapse;
  margin: 10px 0;
  max-width: 100%;
  width: 100%;
}

.mail-html-body :is(th, td) {
  border: 1px solid var(--line);
  padding: 6px 8px;
  vertical-align: top;
}

.mail-attachments {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 14px;
  padding: 12px;
}

.mail-attachments-title {
  align-items: center;
  display: flex;
  gap: 8px;
  font-weight: 800;
  margin-bottom: 8px;
}

.mail-attachments-title svg,
.mail-attachment-icon svg,
.mail-attachment-download svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 16px;
}

.mail-attachments-list {
  display: grid;
  gap: 8px;
}

.mail-attachment-item {
  align-items: center;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 8px 10px;
}

.mail-attachment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mail-attachment-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-attachment-info small {
  color: var(--muted);
  font-size: 11px;
}

.mail-attachment-download {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}
.mail-view-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.mail-view-actions .btn .ic { display: inline-block; vertical-align: middle; margin-right: 4px; }
.mail-view-text-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 88px;
  justify-content: center;
}
.mail-view-text-action .mail-action-icon,
.mail-view-text-action .mail-action-icon svg {
  width: 15px;
  height: 15px;
  display: inline-flex;
  flex-shrink: 0;
}
.mail-view-text-action .mail-action-icon svg {
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mail-app .detect-box { margin: 0; border-radius: var(--radius-sm); flex-shrink: 0; }

@media (max-width: 1100px) {
  .mail-app { grid-template-columns: 160px 1fr 1.3fr; }
}
@media (max-width: 860px) {
  .mail-app { grid-template-columns: 140px 1fr; }
  .mail-view { display: none; }
}

/* ============================================================ */
/* Meetings ICS bar                                             */
/* ============================================================ */
.meet-ics-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.meet-ics-bar .ic { flex-shrink: 0; color: var(--accent); }
.meet-ics-label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.meet-ics-input {
  flex: 1;
  min-width: 180px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--mono, monospace);
}
.meet-ics-input:focus { outline: none; border-color: var(--accent); }
.meet-ics-status { font-size: 11.5px; color: var(--muted); }
.meet-ics-status.ok { color: var(--success); }
.meet-ics-status.err { color: var(--danger); }

/* Inbox page — flex column so mail-app fills height */
.page[data-page="inbox"][data-active] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.page[data-page="inbox"] .mail-app { margin: 0 24px 24px; flex: 1 1 0; min-height: 0; }

/* Mail topbar */
.mail-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 16px 24px 10px;
  flex-shrink: 0;
}
.mail-topbar-title { flex-shrink: 0; margin-right: 4px; }
.mail-topbar-title .eyebrow { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 1px; }
.mail-topbar-title h2.page-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.mail-topbar-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
.mail-topbar-filters .search { width: 180px; flex: 0 1 180px; }
.mail-topbar-filters [data-mail-client-filter] { width: auto; min-width: 110px; max-width: 170px; flex: 1 1 120px; }
.mail-topbar-filters [data-mail-sort] { width: auto; min-width: 155px; max-width: 185px; flex: 1 1 160px; }
.mail-topbar-filters .btn.xs {
  min-height: 30px;
  padding: 7px 12px;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
}
.mail-topbar-filters [data-mail-sort-dir] {
  flex: 0 0 30px;
}
.mail-topbar-filters [data-mail-selected-count] {
  min-width: 64px;
  font-size: 10.5px;
  line-height: 1.15;
  white-space: normal;
}
.mail-topbar-filters [data-mail-result-meta] { font-size: 11px; color: var(--muted-2); white-space: nowrap; padding: 0; display: inline; }
.mail-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mail-command-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mail-command-btn .ic {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mail-icon-btn,
.mail-topbar-filters .mail-icon-btn,
.mail-view-actions .mail-icon-btn {
  width: 31px;
  height: 31px;
  min-width: 31px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}
.mail-icon-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
  color: var(--accent);
}
.mail-icon-btn.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}
.mail-icon-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mail-view-actions .mail-icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
}
.mail-view-actions .mail-icon-btn svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 1320px) {
  .mail-topbar {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mail-topbar-actions {
    grid-column: 2;
    justify-self: end;
  }
}

@media (max-width: 980px) {
  .mail-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .mail-topbar-actions {
    grid-column: auto;
    justify-self: start;
  }
  .mail-topbar-filters .search,
  .mail-topbar-filters [data-mail-client-filter],
  .mail-topbar-filters [data-mail-sort] {
    max-width: none;
  }
}

/* Mail sync countdown */
.mail-sync-countdown { font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; margin-left: 3px; }

/* Profile email signature: keep labels and textarea content from crowding */
[data-profile-card="email-signature"] .form-grid {
  gap: 16px;
}

[data-profile-card="email-signature"] label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.3;
}

[data-profile-card="email-signature"] textarea {
  min-height: 118px;
  padding: 16px 14px 14px;
  line-height: 1.55;
}

[data-profile-card="email-signature"] select {
  padding-top: 0;
  padding-bottom: 0;
}

/* Profile appearance tools */
[data-profile-card="appearance"] .appearance-tools {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: rgba(255,255,255,.025);
}

[data-profile-card="appearance"] .appearance-tools > strong {
  display: block;
  margin-bottom: 4px;
}

[data-profile-card="appearance"] .appearance-tools > p {
  margin: 0 0 12px;
}

[data-profile-card="appearance"] .appearance-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 12px;
}

[data-profile-card="appearance"] .appearance-tool-grid .chk {
  min-height: 34px;
}

[data-hide-timer-countdown] .topbar .timer-clock {
  display: none;
}

.home-work-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.home-work-switch .btn {
  min-height: 28px;
  padding: 5px 10px;
}

.home-work-switch .btn[data-active] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
}

.project-time-list li {
  align-items: center;
}

.project-time-list li > div {
  flex: 1 1 auto;
  min-width: 0;
}

.home-work-time {
  color: var(--text);
  flex: 0 0 auto;
  font-size: 13px;
  margin-left: auto;
  white-space: nowrap;
}

.activity-list .mail-feed-item {
  border-radius: var(--radius-sm);
  margin: 0 -6px;
  padding: 10px 6px;
}

.activity-list .mail-feed-item.is-unread strong {
  color: var(--text);
  font-weight: 700;
}

.activity-list .mail-feed-meta {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page[data-page="tasks"] .task-shell {
  grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 500px);
  gap: 16px;
  min-width: 0;
}

.page[data-page="tasks"] .board[data-task-view="kanban"] {
  display: flex !important;
  flex-direction: row;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
}

.page[data-page="tasks"] .board[data-task-view="kanban"] .lane {
  flex: 0 0 240px;
  min-width: 240px;
  max-width: 240px;
}

.page[data-page="tasks"] .lane {
  min-height: 560px;
  padding: 10px;
}

.page[data-page="tasks"] .lane header {
  gap: 8px;
}

.page[data-page="tasks"] .task-card {
  gap: 8px;
  padding: 10px;
}

.page[data-page="tasks"] .task-card .task-card-head {
  padding-right: 24px;
}

.page[data-page="tasks"] .task-card-toggle-indicator {
  top: -4px;
}

.page[data-page="tasks"] .task-card-expanded {
  gap: 8px;
  padding-top: 9px;
}

.page[data-page="tasks"] .task-card .task-card-actions-row {
  gap: 8px;
  padding-top: 8px;
}

.page[data-page="tasks"] .task-detail {
  max-height: calc(100dvh - 112px);
  overflow: auto;
  padding: 18px;
}

.page[data-page="tasks"] .task-detail header {
  display: grid;
  gap: 6px;
}

.page[data-page="tasks"] .task-detail h3 {
  line-height: 1.2;
  margin: 0;
}

.page[data-page="tasks"] .task-detail header p {
  line-height: 1.35;
  margin: 0;
}

.page[data-page="tasks"] .task-title-edit {
  margin-top: 12px;
}

.page[data-page="tasks"] .task-title-edit label,
.page[data-page="tasks"] .task-detail-grid label,
.page[data-page="tasks"] .task-detail-grid span {
  padding: 8px;
}

.page[data-page="tasks"] .task-title-edit input,
.page[data-page="tasks"] .task-detail-grid select,
.page[data-page="tasks"] .task-notes textarea,
.page[data-page="tasks"] .task-subtask-add input {
  min-height: 36px;
  padding: 8px 10px;
}

.page[data-page="tasks"] .task-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.page[data-page="tasks"] .task-detail-grid label:has(select[name="status"]) {
  grid-column: 1 / -1;
}

.page[data-page="tasks"] .task-detail-grid select[name="status"] {
  min-height: 40px;
}

.page[data-page="tasks"] .task-notes {
  margin-top: 10px;
  padding: 10px;
}

.page[data-page="tasks"] .task-notes textarea {
  min-height: 118px;
  max-height: 180px;
}

.page[data-page="tasks"] .task-subtasks {
  margin-top: 0;
}

.page[data-page="tasks"] .task-subtask-list {
  gap: 5px;
}

.page[data-page="tasks"] .task-subtask-row {
  min-height: 30px;
  padding: 6px 8px;
}

.page[data-page="tasks"] .task-subtask-add {
  gap: 6px;
  margin-top: 7px;
}

.page[data-page="tasks"] .task-detail-actions {
  margin-top: 12px;
}

/* 1660px: kicsit kisebb detail panel */
@media (max-width: 1660px) {
  .page[data-page="tasks"] .task-shell {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
  .page[data-page="tasks"] .task-detail { padding: 16px; }
}

/* 1440px (MacBook Air): board teljes szél, detail alatta */
@media (max-width: 1440px) {
  .page[data-page="tasks"] .task-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
  }
  .page[data-page="tasks"] .task-detail {
    max-height: 480px;
    overflow-y: auto;
    position: static;
  }
  /* 4 kanban oszlop kicsit kisebb */
  .page[data-page="tasks"] .board[data-task-view="kanban"] .lane {
    flex: 0 0 220px;
    min-width: 220px;
    max-width: 220px;
  }
}

/* 960px: 3 oszlop */
@media (max-width: 960px) {
  .page[data-page="tasks"] .board[data-task-view="kanban"] .lane {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
  }
  .page[data-page="tasks"] .task-detail { max-height: none; }
}

/* 768px: 1 col, detail teljesen látható */
@media (max-width: 768px) {
  .page[data-page="tasks"] .board[data-task-view="kanban"] .lane {
    flex: 0 0 180px;
    min-width: 180px;
    max-width: 180px;
  }
  .page[data-page="tasks"] .task-detail { max-height: none; overflow: visible; }
}

@media (max-width: 680px) {
  .home-work-switch {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }
}

/* ================================================================
   COMPREHENSIVE RESPONSIVE — 2026 revision
   Breakpoints: 1280px tablet-L, 960px tablet, 768px mobile, 480px small
   ================================================================ */

/* ── 1280px: táblás/széles nézetekhez ──────────────────────────── */
@media (max-width: 1280px) {
  /* Home hero 2-col → egymás alá */
  .hero-row { grid-template-columns: 1fr 1fr; }

  /* Tasks: kanban 4 → 2 col scrollozható */
  .page[data-page="tasks"] .board[data-task-view="kanban"] {
    display: flex; overflow-x: auto; gap: 12px;
    padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  }
  .page[data-page="tasks"] .board[data-task-view="kanban"] .lane {
    min-width: 240px; flex: 0 0 240px;
  }

  /* Email: 3-panel → 2-panel (nincs jobb detail panel) */
  .inbox-layout { grid-template-columns: 260px 1fr; }
  .mail-detail-pane { display: none; }
  .mail-detail-pane[data-open] { display: flex; }
}

/* ── 960px: tablet ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Hero: egymás alá */
  .hero-row { grid-template-columns: 1fr; }
  .hero-side { border-top: 1px solid var(--line); padding-top: 16px; }

  /* Home grid: 3 kártya → 1 oszlop */
  .home-grid { grid-template-columns: 1fr !important; }

  /* Topbar: search kisebb */
  .search { width: 180px !important; }

  /* Page head actions: wrappelő */
  .page-head { flex-wrap: wrap; gap: 8px; }
  .page-head-actions { flex-wrap: wrap; gap: 6px; }

  /* Projektek/ügyfelek lista: szűrő sor wrappelő */
  .filter-bar { flex-wrap: wrap; gap: 6px; }

  /* Táblák: görgethető */
  .data { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 620px; }

  /* Admin panel */
  .admin-workspace { grid-template-columns: 1fr !important; }
  .admin-grid { grid-template-columns: 1fr !important; }

  /* Spec admin: 1 oszlop */
  [data-tab-panel="spec-admin"] .admin-workspace { grid-template-columns: 1fr; }

  /* Feladatok board kanban: scroll */
  .board[data-task-view="kanban"] {
    display: flex !important; overflow-x: auto; gap: 10px;
    -webkit-overflow-scrolling: touch; padding-bottom: 6px;
  }
  .board[data-task-view="kanban"] .lane {
    min-width: 220px; flex: 0 0 220px;
  }

  /* KPI kártyák */
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-row.four { grid-template-columns: repeat(2, 1fr) !important; }

  /* File grid */
  .folder-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 768px: mobil ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Topbar: tömör mobil változat */
  .topbar { padding: 10px 14px; }
  .search { width: 140px !important; }
  .timer-context { max-width: 90px; font-size: 12px; }

  /* Lap fejléc */
  .page-inner { padding: 14px 14px 100px; }
  .page-head { padding: 14px 14px 10px; }
  .page-title { font-size: 20px; }

  /* Kártyák */
  .card { padding: 14px; }
  .card-head { margin-bottom: 12px; }

  /* Home hero: kompaktabb */
  .hero-num strong { font-size: 44px !important; }
  .hero-num.small strong { font-size: 28px !important; }

  /* KPI → 2 oszlop */
  .kpi-row, .kpi-row.four {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* Táblák: teljes szélességű scroll */
  .data, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 540px; }

  /* Modális: alulról csúszik be */
  .wi-modal { padding: 0 !important; align-items: flex-end !important; }
  .wi-modal-panel {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto;
  }
  .wi-modal-grid { grid-template-columns: 1fr !important; }
  .wi-modal-grid .full, .wi-modal-grid label.full { grid-column: 1 !important; }

  /* Email inbox: csak a lista látszik, kattintás után a detail */
  .inbox-layout { grid-template-columns: 1fr !important; }
  .mail-sidebar { display: none; }
  .mail-list-pane { display: flex; flex-direction: column; }
  .inbox-layout[data-detail-open] .mail-list-pane { display: none; }
  .inbox-layout[data-detail-open] .mail-detail-pane { display: flex !important; }
  .mail-detail-pane { display: none !important; }

  /* Mail topbar: sorba csomagoló */
  .mail-topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .mail-topbar-filters { flex-wrap: wrap; gap: 6px; }
  .mail-topbar-actions { flex-wrap: wrap; }
  .mail-tools { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }

  /* Chat: sidebar rejtve, csak main */
  .chat-shell { grid-template-columns: 1fr !important; }
  .chat-sidebar { display: none !important; }

  /* Spec writer: függőleges stack */
  .sv-layout { flex-direction: column !important; }
  .sv-left {
    width: 100% !important; max-width: 100% !important;
    height: 180px; border-right: none !important;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .sv-right { flex: 1; }

  /* Feladatok: kanban scroll */
  .board[data-task-view="kanban"] {
    display: flex !important; overflow-x: auto; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .board[data-task-view="kanban"] .lane { min-width: 200px; flex: 0 0 200px; }

  /* Feladatok shell: 1 oszlop */
  .page[data-page="tasks"] .task-shell { grid-template-columns: 1fr !important; }

  /* Projekt 360: 1 oszlop */
  .project-360-grid { grid-template-columns: 1fr !important; }
  .project-360-grid > [class*="project-detail-card"] { grid-column: 1 !important; }

  /* Profil */
  .profile-grid { grid-template-columns: 1fr !important; }

  /* Fájltár */
  .folder-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .file-layout { grid-template-columns: 1fr !important; }

  /* Oldalsáv szűrők (fájltár) */
  .file-nav { display: none; }

  /* Admin: 1 oszlop minden */
  .admin-summary { grid-template-columns: 1fr 1fr !important; }
  .permission-grid { grid-template-columns: 1fr !important; }
  .spec-admin-tree article { display: block !important; }

  /* Ajánlatok */
  .page[data-page="offers"] .tbl { min-width: 700px; }

  /* Jelenlét */
  .page[data-page="attendance"] .attendance-layout { grid-template-columns: 1fr !important; }

  /* Meetingek */
  .meet-grid { grid-template-columns: 1fr !important; }

  /* Gombok: teljes szélesség kis gombok helyett */
  .btn.auto-mobile { width: 100%; justify-content: center; }

  /* Oldalszám: kisebb */
  .pager { flex-wrap: wrap; gap: 4px; }
}

/* ── 480px: nagyon kis képernyő ────────────────────────────────── */
@media (max-width: 480px) {
  /* KPI: 1 oszlop */
  .kpi-row, .kpi-row.four { grid-template-columns: 1fr !important; }

  /* Topbar: kereső elrejtve, timer csak szám */
  .search { display: none !important; }
  .timer-context { display: none; }
  .timer-clock { font-size: 12px; }

  /* Lapfejléc: minimális */
  .page-title { font-size: 17px; }
  .page-head-actions .btn span { display: none; }
  .page-head-actions .btn svg { margin: 0; }

  /* Kártyák */
  .card { padding: 12px; }

  /* Modális: teljesen fullscreen */
  .wi-modal-panel { max-height: 100vh !important; border-radius: 0 !important; }

  /* Táblák: kisebb betűméret */
  .tbl { font-size: 12px; min-width: 460px; }
  .tbl th, .tbl td { padding: 8px 8px; }

  /* Folder grid: 1 oszlop */
  .folder-grid { grid-template-columns: 1fr !important; }

  /* Admin summary: 1 oszlop */
  .admin-summary { grid-template-columns: 1fr !important; }

  /* Home-work-switch: wrap */
  .home-work-switch { flex-wrap: wrap; }

  /* Hero kompakt */
  .hero-big, .hero-side { padding: 14px; }
}

/* ================================================================
   EMAIL / MAIL-APP mobil javítások (helyes osztálynevekkel)
   ================================================================ */

/* Mobile back gomb az email nézetben (csak mobilon látszik) */
.mail-view-back-btn {
  display: none;
}

@media (max-width: 768px) {
  /* Mail app: 1 oszlop */
  .mail-app {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar: elrejtve mobilon */
  .mail-app .mail-sidebar {
    display: none;
  }

  /* Email lista: teljes szél */
  .mail-app .mail-list-col {
    display: flex;
    flex-direction: column;
  }

  /* Email detail: elrejtve alapból, back gombbal visszanavigálható */
  .mail-app .mail-view {
    display: none;
    border-left: none;
  }

  /* Ha van kijelölt email (data-mobile-view attr) */
  .mail-app[data-mobile-view] .mail-list-col {
    display: none !important;
  }
  .mail-app[data-mobile-view] .mail-view {
    display: flex !important;
  }

  /* Vissza gomb megjelenik */
  .mail-view-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    width: 100%;
    flex-shrink: 0;
  }

  /* Mail topbar: tömörebb */
  .mail-topbar {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mail-topbar-filters { flex-wrap: wrap; gap: 6px; width: 100%; }
  .mail-topbar-actions { gap: 6px; flex-wrap: wrap; }

  /* Tools sor */
  .mail-tools {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
  .mail-result-meta { display: none; }
}

/* ================================================================
   RESZPONZÍV TÁBLÁZAT → KÁRTYÁK (card layout mobilon)
   960px alatt minden .tbl sor kártyává alakul — nincs csúszka.
   A data-label attribútumot a workspace-api.js tölti fel.
   ================================================================ */

/* Desktop: fix min-width-ek NE akadályozzák a card layoutot mobilon */
@media (max-width: 960px) {
  .project-table,
  .client-table,
  .offer-table,
  .tbl { min-width: 0 !important; }
}

@media (max-width: 960px) {

  /* Wrapper: NINCS csúszka, kártya layout veszi át */
  .data,
  .tbl-wrap,
  .page[data-page="projects"] .data,
  .page[data-page="clients"] .data,
  .page[data-page="offers"] .data {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* Táblázat → block */
  .tbl {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    table-layout: auto !important;
  }

  /* Fejléc rejtve */
  .tbl thead { display: none !important; }

  /* Tbody: flex oszlop, kártyák egymás alatt */
  .tbl tbody {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  /* Sorok → kártyák, 2 oszlopos grid */
  .tbl tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    background: var(--panel) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    width: 100%;
    box-sizing: border-box;
  }

  /* Cellák: label felül, érték alul */
  .tbl tbody td {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    border: none !important;
    padding: 2px 0 !important;
    font-size: 13px;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
    min-width: 0;
  }

  /* Label a data-label attribútumból */
  .tbl tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted-2);
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
  }

  /* Checkbox cella: teljes sor */
  .tbl tbody td.w-check,
  .tbl tbody td:has(> input[type="checkbox"]) {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .tbl tbody td.w-check::before,
  .tbl tbody td:has(> input[type="checkbox"])::before { display: none !important; }

  /* Műveletek (ceruza / törlés) → teljes sor, jobbra igazítva */
  .tbl tbody td.num:last-child {
    grid-column: 1 / -1;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line) !important;
    padding-top: 10px !important;
    margin-top: 2px;
  }
  .tbl tbody td.num:last-child::before { display: none !important; }

  /* Colspan cellák (üres/betöltés állapot) */
  .tbl tbody td[colspan] { grid-column: 1 / -1 !important; }

  /* Projekt: haladás sáv → teljes sor */
  .project-table td.w-progress { grid-column: 1 / -1; }

  /* Lapozó */
  .pagination,
  .list-pagination {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
  }
}

/* 480px: 1 oszlopos kártya */
@media (max-width: 480px) {
  .tbl tbody tr {
    grid-template-columns: 1fr !important;
  }
}

  /* Speciális: colspan (betöltés, üres állapot) → teljes sor */
  .tbl tbody td[colspan] {
    grid-column: 1 / -1 !important;
  }

  /* Projekt táblázat: Haladás / progress bar cellája teljes sor */
  .project-table td.w-progress {
    grid-column: 1 / -1;
  }

  /* Avatar / logo cellák */
  .tbl tbody td .ava,
  .tbl tbody td .avatar {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }

  /* Lapozó tél szélességű */
  .pagination,
  .list-pagination {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── 480px: 1 oszlop a kártyákon ───────────────────────────────── */
@media (max-width: 480px) {
  .tbl tbody tr {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   IKONO-SZÖVEG OPTIMALIZÁCIÓ — Mobilon tekst rejtése, csak ikon
   ================================================================ */

@media (max-width: 768px) {

  /* Gombfelirat rejtése, csak ikon látszik */
  .btn span:not(.avatar):not(.ava):not(.ic),
  button span:not(.avatar):not(.ava):not(.ic) {
    display: none !important;
  }

  /* Toggle/ikongomboknak jó padding */
  .iconbtn {
    padding: 8px;
  }

  /* Topbar: search input rejtése, csak ikon */
  .topbar .search input {
    display: none;
  }
  .topbar .search {
    width: auto;
    padding: 0 6px;
  }

  /* Topbar: timer szelekt rejtése */
  .topbar .timer-context {
    display: none !important;
  }

  /* Topbar: timer szöveg (0:00 / 0:00) tömörbben */
  .topbar .timer-clock {
    font-size: 11px;
    font-weight: 600;
  }

  /* Lapozó szöveg rövidítése */
  .pagination [data-mail-page-info],
  .pagination [data-list-page-info] {
    font-size: 10px;
  }

  /* Modal gombok */
  .wi-modal-actions .btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Kártya műveleti gombok: csak ikon */
  .tbl tbody .btn:not([class*="primary"]) {
    padding: 4px 6px !important;
  }

  /* Hint/tooltip elrejtése */
  .help-tip {
    display: none !important;
  }

  /* Sidebar nav szöveg rejtése */
  .sidebar .nav-item span {
    display: none;
  }

  /* Stat kártyák */
  .stat-card strong {
    font-size: 18px;
  }
  .stat-card span {
    font-size: 10px;
  }
}

/* ── 480px: még kompaktabb ──────────────────────────────────────── */
@media (max-width: 480px) {
  .topbar .timer-clock {
    display: none !important;
  }

  .timer-context {
    display: none !important;
  }

  /* Csak play/stop ikon marad */
  .timer-btn {
    padding: 6px;
  }
}

/* ================================================================
   TOPBAR MOBILE — Logo balra, ikonok + gombok jobbra
   ================================================================ */

/* Alapértelmezett: elrejtve, csak mobilon jelenik meg */
.mobile-brand { display: none !important; }
/* Logo: dark téma → fehér logó; light téma → sötét logó */
.mobile-brand-img { width: 28px; height: 28px; object-fit: contain; display: none; }
.mobile-brand-img.light { display: block; }                           /* default: light */
[data-variant="v3"] .mobile-brand-img.light { display: none; }       /* v3 dark bg */
[data-variant="v3"] .mobile-brand-img.dark  { display: block; }      /* v3: fehér logó */
[data-theme="light"] .mobile-brand-img.dark  { display: none; }      /* light toggle */
[data-theme="light"] .mobile-brand-img.light { display: block; }     /* light toggle */

@media (max-width: 880px) {
  /* Topbar: logó balra, eszközök jobbra */
  .topbar {
    justify-content: space-between !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  /* Mobile logó: balra, csak mobilon */
  .mobile-brand {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 2px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s;
  }

  .mobile-brand:hover {
    background: var(--panel);
  }

  /* Top tools: kompakt, ikonok csak */
  .topbar {
    gap: 6px;
  }

  .top-tools {
    gap: 4px;
  }

  /* Search: csak ikon */
  .topbar .search {
    width: 36px !important;
    padding: 8px;
    border-radius: 8px;
  }

  /* Timer: kompakt */
  .topbar .timer {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .topbar .timer-btn {
    padding: 6px;
    width: 32px;
    height: 32px;
  }

  /* Profile chip */
  .topbar .profile-chip {
    padding: 4px;
    width: auto;
  }

  /* Ikonok nagyobb */
  .topbar .ic {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  /* Topbar még tömöreb */
  .topbar {
    padding: 8px 10px;
    gap: 4px;
  }

  .mobile-brand {
    width: 32px;
    height: 32px;
  }

  .topbar .timer-clock {
    display: none;
  }

  .topbar .timer-context {
    display: none;
  }
}