/* Feature · companyWorkspace (COMPANY-WORKSPACE-B2)
   Scoped under .feature-company-workspace. Reuses clients-page /
   clients-header grammar. Token-driven; no design-system rewrite. */

.feature-company-workspace {
  padding: var(--space-6) 0 var(--space-10);
}

.feature-company-workspace .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-inline: var(--space-4);
}

.feature-company-workspace__narrow {
  max-width: 720px;
}

.feature-company-workspace__header {
  gap: var(--space-3);
}

.feature-company-workspace__meta {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary, inherit);
  font-size: var(--font-size-sm, 0.875rem);
}

.feature-company-workspace__nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-1);
  width: 100%;
  margin-top: var(--space-2);
  padding: 0 0 var(--space-1);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--color-border-subtle);
}

.feature-company-workspace__nav-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
  padding: 0 var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium);
  background: transparent;
}

.feature-company-workspace__nav-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}

.feature-company-workspace__nav-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.feature-company-workspace__nav-link--active {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: transparent;
  border-bottom-color: var(--color-accent);
}

.feature-company-workspace__state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
}

.feature-company-workspace__card,
.feature-company-workspace__card-link {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

@media (min-width: 768px) {
  .feature-company-workspace__card,
  .feature-company-workspace__card-link {
    padding: var(--space-5);
  }
}

.feature-company-workspace__card-link {
  text-decoration: none;
  color: inherit;
}

.feature-company-workspace__card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg, 1.125rem);
}

.feature-company-workspace__card-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.feature-company-workspace__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.feature-company-workspace__facts dt {
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.75;
}

.feature-company-workspace__facts dd {
  margin: 0;
}

.feature-company-workspace__description {
  margin: var(--space-4) 0 0;
  white-space: pre-wrap;
}

.feature-company-workspace__inline-actions,
.feature-company-workspace__actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feature-company-workspace__actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.feature-company-workspace__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feature-company-workspace__tab {
  appearance: none;
  border: 1px solid var(--color-border-subtle);
  background: transparent;
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.feature-company-workspace__tab--active {
  font-weight: 600;
  background: var(--color-bg-subtle);
}

.feature-company-workspace__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-company-workspace__banner,
.feature-company-workspace__note {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-subtle);
}

.feature-company-workspace__error {
  color: var(--color-danger, #b00020);
  margin: 0;
}

.feature-company-workspace__member-edit {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .feature-company-workspace__card-top {
    flex-direction: column;
  }
}

.feature-company-workspace__branding-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-company-workspace__brand-banner {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md, 8px);
}

.feature-company-workspace__brand-logo {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border-subtle);
}

/* C2 corporate CRM — topology-local notes (no parallel design system). */
.feature-company-clients__owner-note {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 0.875rem;
  opacity: 0.8;
}

.feature-company-clients__prefs-preview {
  margin: 0;
  padding: var(--space-2, 0.5rem);
  overflow: auto;
  font-size: 0.75rem;
  white-space: pre-wrap;
}

.feature-company-clients__transfer {
  margin-bottom: var(--space-3, 0.75rem);
}

/*
 * C2 list/queue reuse .clients-table but columns differ from personal CRM.
 * Name uses th.client-row__name (same as personal) so type/status nth labels
 * align; remaining C2 columns get topology-local mobile labels only.
 */
@media (max-width: 991px) {
  .clients-page.feature-company-clients .clients-table tbody tr {
    grid-template-areas:
      "name name name"
      "type status status"
      "assign assign assign"
      "responsible responsible author";
  }

  .clients-page.feature-company-clients
    .clients-table
    tbody
    td[data-c2-col="type"]::before {
    content: "Тип";
  }

  .clients-page.feature-company-clients
    .clients-table
    tbody
    td[data-c2-col="status"]::before {
    content: "Статус";
  }

  .clients-page.feature-company-clients
    .clients-table
    tbody
    td[data-c2-col="responsible"] {
    grid-area: responsible;
  }

  .clients-page.feature-company-clients
    .clients-table
    tbody
    td[data-c2-col="responsible"]::before {
    content: "Відповідальний";
  }

  .clients-page.feature-company-clients
    .clients-table
    tbody
    td[data-c2-col="author"] {
    grid-area: author;
  }

  .clients-page.feature-company-clients
    .clients-table
    tbody
    td[data-c2-col="author"]::before {
    content: "Автор";
  }

  .clients-page.feature-company-clients
    .clients-table
    tbody
    td[data-c2-col="assign"] {
    grid-area: assign;
  }

  .clients-page.feature-company-clients
    .clients-table
    tbody
    td[data-c2-col="assign"]::before {
    content: "Призначити";
  }
}

/* COMPANY-WORKSPACE-E2 / R2 — work list, filters, modal, detail */
.feature-company-workspace__page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-company-workspace__nav-scroller {
  position: relative;
}

.feature-company-workspace__nav-scroller::before,
.feature-company-workspace__nav-scroller::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5rem;
  pointer-events: none;
  z-index: 1;
}

.feature-company-workspace__nav-scroller::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--color-bg-canvas),
    transparent
  );
}

.feature-company-workspace__nav-scroller::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--color-bg-canvas),
    transparent
  );
}

.feature-company-workspace__company-name {
  display: inline-block;
  max-width: min(100%, 18rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.feature-company-work__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.feature-company-work__filter-primary,
.feature-company-work__filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: end;
}

.feature-company-work__filter-status-row,
.feature-company-work__filter-extra {
  display: contents;
}

.feature-company-work__filter-toolbar .ui-form__field {
  flex: 1 1 11rem;
  width: auto;
  min-width: 11rem;
  max-width: 16rem;
}

.feature-company-work__filter-date {
  flex: 1 1 16rem;
  min-width: 16rem;
  max-width: 22rem;
}

.feature-company-work__kind-switch {
  display: inline-flex;
  align-self: flex-start;
  align-items: stretch;
  gap: var(--space-6);
  padding: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.feature-company-work__kind-switch-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 0 var(--space-1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  box-shadow: none;
}

.feature-company-work__kind-switch-btn:hover {
  color: var(--color-text-primary);
  background: transparent;
}

.feature-company-work__kind-switch-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.feature-company-work__kind-switch-btn--active {
  background: transparent;
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  border-bottom-color: var(--color-accent);
  box-shadow: none;
}

.feature-company-work__filter-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.feature-company-work__filter-toolbar .feature-company-work__filter-status-row,
.feature-company-work__filter-toolbar .feature-company-work__filter-extra {
  display: contents;
}

.feature-company-work__filters-toggle {
  display: none;
}

.feature-company-work__filter-summary {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.feature-company-work__overdue {
  min-height: 40px;
  align-items: center;
}

.feature-company-work__overdue .ui-checkbox__indicator {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-strong);
}

.feature-company-work__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-company-work__row {
  margin: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-surface, transparent);
}

.feature-company-work__row--overdue {
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

.feature-company-work__row-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.feature-company-work__row-kind {
  font-size: var(--font-size-xs, 0.75rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary, inherit);
}

.feature-company-work__row-title {
  font-weight: 600;
  color: var(--color-text-primary, inherit);
}

.feature-company-work__row-link:hover .feature-company-work__row-title,
.feature-company-work__row-link:focus-visible .feature-company-work__row-title {
  text-decoration: underline;
}

.feature-company-work__row-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-2) var(--space-4);
  width: 100%;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, inherit);
}

.feature-company-work__meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0;
}

.feature-company-work__meta-grid dt {
  font-size: 0.75rem;
  opacity: 0.7;
}

.feature-company-work__meta-grid dd {
  margin: 0;
}

.feature-company-work__readable {
  margin: 0;
  white-space: pre-wrap;
}

.feature-company-work__pill--task,
.feature-company-work__pill--viewing {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1.2;
}

.feature-company-work__history {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
}

.feature-company-work__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.feature-company-work__detail .ui-form,
.feature-company-workspace__card > .ui-form {
  margin-top: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  gap: var(--space-4);
}

.feature-company-work__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.feature-company-work__links-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.feature-company-work__links-group > span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.feature-company-work__links-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.feature-company-work__delete {
  padding-top: var(--space-2);
}

.feature-company-work__delete h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.feature-company-work__modal-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
  min-width: 0;
}

.feature-company-work__modal-group legend {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm, 0.875rem);
  margin-bottom: var(--space-2);
  padding: 0;
}

.feature-company-work__modal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

.feature-company-work__assign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: end;
}

.feature-company-work__modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  gap: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.feature-company-workspace .ui-form__field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  width: 100%;
  margin: 0;
}

.feature-company-workspace .ui-form__field > span:not(.ui-inline-error):not(.ui-field__help):not(.ui-field__required):not(.ui-field__error),
.feature-company-workspace .ui-form__field > .ui-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.feature-company-workspace .ui-form__field .ui-text-input,
.feature-company-workspace .ui-form__field .ui-select,
.feature-company-workspace .ui-form__field .ui-textarea,
.feature-company-workspace .ui-form__field input,
.feature-company-workspace .ui-form__field select,
.feature-company-workspace .ui-form__field textarea,
.feature-company-workspace .ui-field .ui-text-input,
.feature-company-workspace .ui-field .ui-select,
.feature-company-workspace .ui-field .ui-textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.feature-company-workspace__modal .ui-field,
.feature-company-workspace__modal .feature-company-work__modal-group {
  scroll-margin-top: var(--space-5);
  scroll-margin-bottom: var(--space-5);
}

.feature-company-work__date-editor {
  display: grid;
  grid-template-columns: minmax(20ch, 1fr);
  gap: var(--space-2);
  align-items: stretch;
  min-width: 0;
}

.feature-company-work__date-editor:has(.feature-company-work__date-picker-btn) {
  grid-template-columns: minmax(20ch, 1fr) auto;
}

.feature-company-workspace .feature-company-work__date-editor .ui-text-input {
  width: 100%;
  min-width: 20ch;
}

.feature-company-work__date-picker-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.feature-company-work__date-picker-btn:hover:not(:disabled) {
  color: var(--color-text-primary);
}

.feature-company-work__date-picker-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.feature-company-work__date-picker-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.feature-company-workspace__modal .feature-clients-list__modal-body {
  flex: 1 1 auto;
  min-height: auto;
  max-height: min(48rem, calc(100vh - 8rem));
}

.feature-company-work__modal-actions {
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-subtle);
}

.feature-company-workspace__modal.feature-clients-list__modal {
  padding: max(var(--space-4), env(safe-area-inset-top, 0px))
    max(var(--space-4), env(safe-area-inset-right, 0px))
    max(var(--space-4), env(safe-area-inset-bottom, 0px))
    max(var(--space-4), env(safe-area-inset-left, 0px));
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  table-layout: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__weekdays,
.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__weekdays {
  background: var(--color-bg-subtle, transparent);
  border-bottom: 1px solid var(--color-border-subtle);
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__weekdays > * {
  padding: var(--space-2) var(--space-1);
  text-align: center;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__cell {
  max-width: none;
  height: auto;
  min-height: 96px;
}

@media (max-width: 991px) {
  .feature-company-workspace__modal.feature-clients-list__modal {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
  }

  .feature-company-workspace__modal .feature-clients-list__modal-dialog {
    max-width: 100%;
    max-height: calc(
      100dvh - 56px - 64px - env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px)
    );
    margin: 0;
  }

  .feature-company-workspace__header.clients-header {
    align-items: stretch;
  }

  .feature-company-workspace .clients-header__actions {
    flex-wrap: wrap;
  }
}

.feature-company-clients__access {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feature-company-clients__access-kicker {
  margin: 0;
  font-size: var(--font-size-xs, 0.75rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.feature-company-clients__access .ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.feature-company-clients__access form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.feature-company-clients__access .ui-checkbox,
.feature-company-clients__access label {
  min-height: 40px;
}

.feature-company-workspace .action-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary) !important;
}

.feature-company-workspace .action-btn--ghost:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary) !important;
  transform: none;
}

.feature-company-workspace .clients-header__actions .action-btn:not(.action-btn--ghost) {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary) !important;
}

.feature-company-workspace .clients-header__actions .action-btn:not(.action-btn--ghost):hover:not(:disabled) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
}

.feature-company-workspace .action-btn--danger {
  border-color: var(--color-border-default);
  color: var(--color-danger) !important;
}

.feature-company-workspace .action-btn--danger:hover:not(:disabled) {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger) !important;
  transform: none;
}

.feature-company-workspace .clients-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.feature-company-workspace .clients-header__actions .btn-more,
.feature-company-workspace .clients-header__actions .action-btn,
.feature-company-workspace .ui-form__button {
  min-height: 40px;
  width: max-content;
  max-width: 100%;
}

.feature-company-workspace .feature-client-detail__property-search {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
}

.feature-company-workspace .feature-client-detail__property-search .ui-text-input {
  flex: 1 1 auto;
  min-width: 0;
}

.feature-company-workspace .feature-client-detail__property-search .ui-form__button {
  flex: 0 0 auto;
  min-height: 40px;
}

.feature-company-workspace .feature-client-detail__property-option {
  text-align: left;
}

.feature-company-workspace__modal .feature-clients-list__modal-close {
  width: 40px;
  height: 40px;
}

.feature-company-workspace__modal .feature-clients-list__modal-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.feature-company-workspace .feature-client-detail__property-option--selected {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}

.feature-company-workspace .feature-client-detail__property-option--selected:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  gap: var(--space-3);
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__toolbar-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__filter-chips {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr);
  gap: var(--space-3);
  align-items: end;
  flex: 1 1 20rem;
  max-width: 36rem;
  margin-left: auto;
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__nav-btn,
.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__today-btn {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.feature-company-work.feature-tasks-calendar .feature-tasks-calendar__nav-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}

@media (max-width: 767px) {
  .feature-company-workspace {
    padding: var(--space-3) 0 var(--space-6);
  }

  .feature-company-workspace .container {
    gap: var(--space-3);
  }

  .feature-company-workspace__page-head {
    gap: var(--space-2);
  }

  .feature-company-workspace__header.clients-header {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .feature-company-workspace .clients-header__title {
    font-size: var(--font-size-lg, 1.125rem);
    margin-bottom: 0;
  }

  .feature-company-workspace .clients-header__sub {
    display: none;
  }

  .feature-company-workspace__header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    gap: var(--space-2);
  }

  .feature-company-workspace__header-actions .action-btn--ghost {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .feature-company-workspace__header-actions .btn-more,
  .feature-company-workspace__header-actions .action-btn {
    width: 100%;
    max-width: 100%;
  }

  .feature-company-workspace__header-actions .action-btn--ghost {
    width: max-content;
  }

  .feature-company-work__filters {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    gap: var(--space-2);
  }

  .feature-company-work__modal-row,
  .feature-company-work__assign-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-company-work__kind-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: var(--space-2);
  }

  .feature-company-work__kind-switch-btn {
    width: 100%;
    min-height: 44px;
  }

  .feature-company-work__filter-status-row {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .feature-company-workspace .clients-header__actions .btn-more,
  .feature-company-workspace .clients-header__actions .action-btn,
  .feature-company-workspace .ui-form__button,
  .feature-company-workspace .ui-text-input,
  .feature-company-workspace .ui-select,
  .feature-company-workspace .ui-field .ui-text-input,
  .feature-company-workspace .ui-field .ui-select,
  .feature-company-workspace__modal .feature-clients-list__modal-close,
  .feature-company-work.feature-tasks-calendar .feature-tasks-calendar__nav-btn,
  .feature-company-work.feature-tasks-calendar .feature-tasks-calendar__today-btn,
  .feature-company-work__date-picker-btn {
    min-height: 44px;
  }

  .feature-company-work__overdue {
    min-height: 44px;
  }

  .feature-company-workspace__modal .feature-clients-list__modal-close {
    width: 44px;
    height: 44px;
  }

  .feature-company-work.feature-tasks-calendar .feature-tasks-calendar__toolbar {
    flex-wrap: wrap;
  }

  .feature-company-work.feature-tasks-calendar .feature-tasks-calendar__filter-chips {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    margin-left: 0;
    width: 100%;
    flex: 1 1 100%;
  }

  .feature-company-work__modal-form .feature-clients-list__modal-body {
    padding-bottom: var(--space-4);
  }

  .feature-company-work__modal-form .feature-client-detail__property-options {
    scroll-margin-bottom: 5rem;
  }

  .feature-company-work__modal-form .feature-client-detail__property-options li:last-child {
    scroll-margin-bottom: 6rem;
  }
}

@media (max-width: 991px) and (max-height: 640px) {
  .feature-company-workspace {
    padding: var(--space-2) 0 var(--space-4);
  }

  .feature-company-workspace .container {
    gap: var(--space-2);
  }

  .feature-company-workspace__header.clients-header {
    padding: var(--space-2);
    gap: var(--space-1);
  }

  .feature-company-workspace__nav {
    margin-top: 0;
    padding-bottom: 0;
  }

  .feature-company-work__filters {
    padding: var(--space-2);
    margin-bottom: var(--space-2);
    gap: var(--space-2);
  }
}

@media (max-width: 991px) {
  .feature-company-work__kind-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: var(--space-2);
  }

  .feature-company-work__kind-switch-btn {
    width: 100%;
    min-height: 44px;
  }

  .feature-company-work__filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
  }

  .feature-company-work__filters-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .feature-company-work__filter-primary,
  .feature-company-work__filter-toolbar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-3);
  }

  .feature-company-work__filter-status-row,
  .feature-company-work__filter-toolbar .feature-company-work__filter-status-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    align-items: end;
    gap: var(--space-3);
  }

  .feature-company-work__filter-toolbar .feature-company-work__filter-extra,
  .feature-company-work__filter-extra {
    display: none;
  }

  .feature-company-work__filter-toolbar .feature-company-work__filter-extra.is-open,
  .feature-company-work__filter-extra.is-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    width: 100%;
  }

  .feature-company-work__filter-toolbar .ui-form__field,
  .feature-company-work__filter-date {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: none;
  }
}